Menambahkan dan Menghapus Class Secara Dinamis dengan JavaScript
Dalam pengembangan web, sering kali kita perlu memanipulasi tampilan dan perilaku elemen HTML secara dinamis, berdasarkan interaksi pengguna atau perubahan data. Salah satu cara yang efektif untuk mencapai hal ini adalah dengan menambahkan dan menghapus class secara dinamis menggunakan JavaScript.
Mengapa Menggunakan Class Dinamis?
- Tampilan responsif: Class dapat mengubah style elemen, sehingga memungkinkan kita untuk merubah tampilan elemen berdasarkan kondisi tertentu.
- Fungsionalitas interaktif: Class dapat dikaitkan dengan event listener, memungkinkan elemen untuk bereaksi terhadap interaksi pengguna seperti klik, hover, atau fokus.
- Organisasi kode yang lebih baik: Menggunakan class memungkinkan kita untuk mengorganisasikan kode CSS dengan lebih baik, mempermudah pemeliharaan dan modifikasi di masa depan.
Menambahkan Class dengan JavaScript
Ada beberapa cara untuk menambahkan class ke elemen HTML dengan JavaScript:
1. Menggunakan classList.add():
const myElement = document.getElementById("myElement");
myElement.classList.add("newClass");
Kode di atas akan menambahkan class "newClass" ke elemen dengan id "myElement". Metode classList.add() memungkinkan kita untuk menambahkan satu atau lebih class sekaligus.
2. Menggunakan className:
const myElement = document.getElementById("myElement");
myElement.className += " newClass";
Metode ini menggunakan properti className dari elemen dan menambahkan class baru ke akhir string class yang sudah ada. Perhatikan bahwa metode ini menambahkan spasi sebelum class baru.
Menghapus Class dengan JavaScript
Sama seperti menambahkan class, ada beberapa cara untuk menghapus class dari elemen HTML dengan JavaScript:
1. Menggunakan classList.remove():
const myElement = document.getElementById("myElement");
myElement.classList.remove("oldClass");
Kode ini akan menghapus class "oldClass" dari elemen dengan id "myElement". Metode classList.remove() hanya menghapus satu class pada satu waktu.
2. Menggunakan className:
const myElement = document.getElementById("myElement");
myElement.className = myElement.className.replace(" oldClass", "");
Metode ini menggunakan replace() untuk menghapus class "oldClass" dari string class elemen. Perhatikan bahwa metode ini memerlukan string lengkap class sebagai parameter, termasuk spasi sebelum dan sesudahnya.
Contoh Penggunaan
Berikut adalah contoh sederhana bagaimana menambahkan dan menghapus class secara dinamis dalam JavaScript:
Class Dinamis
Dalam contoh ini, tombol dengan id "myButton" akan menambahkan class "active" dan mengubah latar belakangnya menjadi kuning ketika diklik. Ketika diklik lagi, class "active" akan dihapus, sehingga latar belakang tombol kembali ke warna defaultnya.
Kesimpulan
Menambahkan dan menghapus class secara dinamis dengan JavaScript adalah teknik yang kuat untuk membuat situs web yang responsif dan interaktif. Dengan menggunakan metode yang tepat, kita dapat memanipulasi tampilan dan perilaku elemen HTML dengan mudah dan efisien.