Menambahkan dan Menghapus Class dengan JavaScript
JavaScript memberikan fleksibilitas tinggi dalam memanipulasi elemen HTML, termasuk mengelola class-nya. Dua fungsi utama yang digunakan untuk menambahkan dan menghapus class adalah classList.add() dan classList.remove().
Menambahkan Class dengan classList.add()
Fungsi classList.add() menambahkan satu atau lebih class baru ke elemen yang ditargetkan.
Sintaks:
element.classList.add(className1, className2, ...);
Contoh:
Menambahkan Class dengan JavaScript
Ini adalah paragraf.
Pada contoh di atas, ketika tombol "Tambahkan Class" diklik, fungsi addClass() akan menambahkan class "active" ke elemen paragraf, yang akan mengubah warna latar belakangnya menjadi kuning.
Menghapus Class dengan classList.remove()
Fungsi classList.remove() menghapus class yang telah ada pada elemen yang ditargetkan.
Sintaks:
element.classList.remove(className);
Contoh:
Menghapus Class dengan JavaScript
Ini adalah paragraf tersembunyi.
Pada contoh di atas, paragraf awalnya tersembunyi karena memiliki class "hidden". Ketika tombol "Tampilkan Paragraf" diklik, fungsi removeClass() akan menghapus class "hidden", membuat paragraf terlihat.
Menentukan Keberadaan Class dengan classList.contains()
Fungsi classList.contains() memungkinkan Anda untuk memeriksa apakah sebuah elemen memiliki class tertentu.
Sintaks:
element.classList.contains(className);
Contoh:
let paragraph = document.getElementById("myParagraph");
if (paragraph.classList.contains("active")) {
console.log("Paragraf memiliki class 'active'.");
} else {
console.log("Paragraf tidak memiliki class 'active'.");
}
Penggunaan Tambahan
Anda juga bisa menggunakan classList.toggle() untuk menambahkan class jika belum ada, atau menghapusnya jika sudah ada. Selain itu, classList.replace() dapat digunakan untuk mengganti class yang sudah ada dengan class yang baru.
Kesimpulan
Manipulasi class dengan JavaScript memberikan kontrol yang lebih besar atas tampilan dan perilaku elemen HTML. Dengan classList.add(), classList.remove(), dan fungsi lain yang terkait, Anda dapat dengan mudah mengelola class dan menyesuaikan tampilan website Anda secara dinamis.