Cara Menambahkan Class CSS ke Elemen dengan JavaScript
JavaScript memungkinkan kita untuk memanipulasi elemen HTML secara dinamis, termasuk menambahkan dan menghapus class CSS. Kemampuan ini sangat berguna untuk membuat antarmuka pengguna yang responsif dan interaktif.
Metode classList.add()
Metode classList.add() merupakan cara yang paling umum dan direkomendasikan untuk menambahkan class CSS ke elemen HTML.
Sintaks:
element.classList.add('nama-class');
Contoh:
Menambahkan Class CSS dengan JavaScript
Ini adalah paragraf biasa.
Pada contoh di atas, tombol "Tambahkan Highlight" akan menambahkan class highlight ke elemen <p> dengan id paragraf ketika diklik, sehingga latar belakang paragraf akan menjadi kuning.
Metode className
Metode className memungkinkan kita untuk mengakses dan memanipulasi atribut class dari elemen HTML.
Sintaks:
element.className = 'nama-class';
Contoh:
Menambahkan Class CSS dengan JavaScript
Ini adalah paragraf biasa.
Pada contoh di atas, tombol "Tambahkan Highlight" akan mengatur atribut class dari elemen <p> dengan id paragraf menjadi highlight, sehingga latar belakang paragraf akan menjadi kuning.
Perbedaan classList.add() dan className
classList.add()hanya menambahkan class baru tanpa mengubah class yang sudah ada.classNamemengganti semua class yang ada dengan class baru yang diberikan.
Penggunaan classList.add()
Metode classList.add() adalah pilihan yang lebih baik karena lebih fleksibel dan dapat digunakan untuk menambahkan beberapa class ke elemen tanpa menghapus class yang sudah ada. Selain itu, classList.add() menawarkan beberapa metode bermanfaat lainnya seperti:
classList.remove(): Menghapus class dari elemen.classList.toggle(): Menambahkan atau menghapus class dari elemen tergantung apakah class sudah ada atau tidak.classList.contains(): Mengecek apakah elemen memiliki class tertentu.
Kesimpulan
JavaScript memberikan kemampuan yang kuat untuk memanipulasi elemen HTML, termasuk menambahkan dan menghapus class CSS. Dengan menggunakan metode classList.add() dan metode className, kita dapat membuat antarmuka pengguna yang lebih dinamis dan interaktif.