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

Dalam tutorial belajar jQuery sebelumnya kita telah membahas cara mengambil dan mengubah property CSS secara dinamis. Materi kali ini juga 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 tutorial ini sebaiknya anda juga sudah paham tentang apa itu CSS class dan cara penggunaannya. Jika belum bisa 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 dalam element HTML saat ini. Sebagai contoh, misalkan saya memiliki sebuah tag HTML berikut:

Jika saya menjalankan kode:

$("#box").addClass("dua");

Hasilnya akan menjadi:

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

Berikut contoh praktek penggunaan method addClass jQuery:

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

Jika anda menjalankan kode diatas, akan tampil 3 buah tombol: Tambah Warna, Tambah Border dan Tambah Bayang. Diatas ketiga tombol ini sebenarnya terdapat sebuah tag

dengan lebar 300px dan tinggi 80px. Karena tidak diwarnai, box ini tidak tampak.

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

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

$("#box").addClass("add_warna");

Artinya, tambahkan sebuah class CSS dengan nama “add_warna” ke dalam tag HTML yang memiliki id=”#box”. Sehingga tag

akan berubah jadi:

Karena di dalam selector .add_warna saya telah menulis property background-color: pink, box langsung berwarna pink. Efek penambahan ini akan mudah dilihat jika anda mengaktifkan fitur Web Developer Tools dari web browser, seperti tampilan berikut:

Tombol kedua, Tambah Border akan menjalankan kode jQuery:

$("#box").addClass("add_border");

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

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

---

Cara Menghapus Class CSS dengan jQuery

Jika jQuery menyediakan method addClass() untuk menambahkan class CSS, maka juga tersedia method removeClass() yang bisa digunakan untuk menghapus class CSS.

Sebagai contoh, jika di dalam kode HTML saya memiliki tag berikut:

Maka ketika saya menjalankan kode:

$("#box").removeClass("tiga");

Class tiga akan dihapus dari kode HTML, menjadi:

Berikut praktek dari penggunaan 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 adalah kebalikan dari contoh kode program sebelumnya. Disini saya menampilkan box lengkap dengan warna, border dan efek bayangan.

Ketika tombol Hapus Warna diklik, perintah berikut akan dijalankan:

$("#box").removeClass("add_warna");

Hasilnya warna box akan hilang. Ini karena property background-color: pink berada di dalam class add_warna. Jika class ini dihapus, warna box juga akan ikut terhapus. Begitu juga dengan tombol Hapus Border dan Hapus Bayang.

---

Mengenal Cara Penggunaan 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. Jika saat ini class tidak ada, maka akan ditambahkan. Jika sudah ada, akan dihapus. Efeknya mirip dengan saklar: on atau off secara bergantian.

Langsung saja kita lihat contoh prakteknya:

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

Silahkan anda klik beberapa kali tombol Warna, Warna pink akan bergantian muncul. Ini karena perintah:

$("#box").toggleClass("add_warna");

Akan bergantian menambah dan mengapus class add_warna. Hal yang sama juga berlaku untuk tombol Border dan Bayang. Silahkan anda mencoba kode program yang ada. Atau lebih bagus lagi jika memodifikasi kode program yang saya buat, misalnya menambahkan efek CSS lain.

Dalam tutorial belajar jQuery Duniailkom berikutnya, saya akan membahas tentang cara mengubah lebar dan tinggi element HTML menggunakan jQuery.

Sumber wk.com

blogger

Next Post

Previous Post