Tutorial Belajar jQuery Part 14: Cara Mengubah Class CSS elemen HTML dengan jQuery

Posted on

Di panduan belajar jQuery sebelumnya kita telah membahas cara mengambil dan mengubah property CSS secara dinamis. Bahan kali ini pun masih berkaitan dengan CSS, yakni cara mengubah class CSS elemen HTML dengan jQuery. Kita akan mempelajari 3 method jQuery, yakni addClass(), removeClass(), dan toggleClass().

Untuk dapat mengikuti panduan ini sebaiknya sobat pun telah paham mengenai apa itu CSS class dan cara penggunaannya. Seandainya belum dapat baca kembali di: Mengenal Jenis-jenis Selector Dasar CSS.


Cara Menambah Class CSS dengan jQuery

jQuery menyediakan method addClass() untuk menambahkan sebuah class CSS baru ke di element HTML dikala ini. Selaku contoh, misalkan saya mempunyai sebuah tag HTML berikut:

Seandainya saya menjalankan kode:

Hasilnya akan menjadi:

Perhatikan di di atribut class, telah bertambah 1 class CSS lagi. Agar terlihat perubahan, pastinya kita telah mempersiapkan kode CSS untuk class satu dan class dua.

Berikut contoh praktek pemakaian method addClass jQuery:

See the Pen Cara Menambah Class CSS dengan method addClass() jQuery by duniailkom (@duniailkom) on CodePen.10206

Seandainya sobat menjalankan kode diatas, akan tampil 3 buah tombol: Tambah Warna, Tambah Border dan Tambah Bayang. Diatas ketiga tombol ini sebetulnya terdapat sebuah tag <div> dengan lebar 300px dan tinggi 80px. Karena tak diwarnai, box ini tak tampak.

Di di kode CSS, saya mempersiapkan 3 buah class selector, yakni .add_warna, .add_border dan .add_bayang. Ketiga selector ini mempunyai property yang berbeda-beda.

Ketika tombol Tambah Warna di-klik, kode jQuery berikut akan dijalankan:

Artinya, tambahkan sebuah class CSS dengan nama “add_warna” ke di tag HTML yang mempunyai id=”#box”. Sehingga tag <div id=”#box”> akan berubah jadi:

Karena di di selector .add_warna saya telah menulis property background-color: pink, box seketika berwarna pink. Efek penambahan ini akan gampang dilihat jikalau sobat mengaktifkan fitur Web Developer Tools dari web browser, seperti tampilan berikut:

Tombol kedua, Tambah Border akan menjalankan kode jQuery:

Hasilnya, kotak box akan mempunyai bingkai hitam. Sesuai dengan isi property CSS di di class sector .add_border.

Terakhir, tombol Tambah Bayang akan menambahkan class .add_bayang, sehingga box akan mempunyai efek bayangan dari property box-shadow CSS3: box-shadow: 7px 7px silver.


Cara Menghapus Class CSS dengan jQuery

Seandainya jQuery menyediakan method addClass() untuk menambahkan class CSS, karenanya pun terdapat method removeClass() yang dapat digunakan untuk menghapus class CSS.

Selaku contoh, jikalau di di kode HTML saya mempunyai tag berikut:

Karenanya ketika saya menjalankan kode:

Class tiga akan dihapus dari kode HTML, menjadi:

Berikut praktek dari pemakaian method removeClass untuk menghapus class CSS dengan jQuery:

See the Pen Cara Menghapus Class CSS dengan method removeClass() jQuery by duniailkom (@duniailkom) on CodePen.10206

Kode diatas yaitu kebalikan dari contoh kode program sebelumnya. Disini saya menampilkan box komplit dengan warna, border dan efek bayangan.

Ketika tombol Hapus Warna diklik, command berikut akan dijalankan:

Hasilnya warna box akan hilang. Ini karena property background-color: pink berada di di class add_warna. Seandainya class ini dihapus, warna box pun akan ikut terhapus. Semacam itu pun dengan tombol Hapus Border dan Hapus Bayang.


Mengenal Cara Pemakaian Method toggleClass jQuery

Selain method addClass() dan removeClass(), jQuery masih menyediakan 1 lagi method terkait class CSS, yakni toogleClass().

Method toggleClass() akan bergantian menambah dan menghapus class CSS. Seandainya dikala ini class tak ada, karenanya akan ditambahkan. Seandainya telah ada, akan dihapus. Efeknya mirip dengan saklar: on atau off secara bergantian.

Seketika saja kita lihat contoh prakteknya:

See the Pen Cara Memodifikasi Class CSS dengan method toggleClass() jQuery by duniailkom (@duniailkom) on CodePen.10206

Silahkan sobat klik beberapa kali tombol Warna, Warna pink akan bergantian muncul. Ini karena command:

Akan bergantian menambah dan mengapus class add_warna. Hal yang sama pun berlaku untuk tombol Border dan Bayang. Silahkan sobat mencoba kode program yang terdapat. Atau lebih bagus lagi jikalau memodifikasi kode program yang saya bikin, misalnya menambahkan efek CSS lain.

Di panduan belajar jQuery Duniailkom berikutnya, saya akan membahas mengenai cara mengubah lebar dan tinggi element HTML menggunakan jQuery.


Sumber https://www.duniailkom.com/