Menambahkan Class CSS dengan JavaScript pada Klik
Seringkali kita perlu mengubah tampilan elemen HTML saat pengguna mengkliknya. Salah satu cara yang mudah untuk melakukannya adalah dengan menambahkan class CSS menggunakan JavaScript. Dalam artikel ini, kita akan membahas bagaimana melakukan hal ini, beserta contoh-contoh praktisnya.
1. Mendapatkan Elemen dan Menambahkan Class
Untuk menambahkan class CSS pada elemen HTML, kita perlu terlebih dahulu mendapatkan referensi ke elemen tersebut. Kita bisa menggunakan metode getElementById, querySelector, atau metode lainnya yang tersedia dalam JavaScript. Setelah mendapatkan referensi ke elemen, kita dapat menggunakan metode classList.add untuk menambahkan class baru.
Contoh:
// Mendapatkan elemen dengan id "myElement"
const myElement = document.getElementById("myElement");
// Menambahkan class "active" pada elemen saat diklik
myElement.addEventListener("click", function() {
myElement.classList.add("active");
});
Kode di atas akan menambahkan class "active" ke elemen dengan id "myElement" saat pengguna mengkliknya. Class "active" ini biasanya berisi aturan CSS yang akan mengubah tampilan elemen, seperti mengubah warna latar belakang atau menambahkan efek visual lainnya.
2. Menghapus Class
Jika Anda ingin menghapus class yang ditambahkan sebelumnya, Anda bisa menggunakan metode classList.remove.
Contoh:
// Mendapatkan elemen dengan id "myElement"
const myElement = document.getElementById("myElement");
// Menghapus class "active" dari elemen saat diklik
myElement.addEventListener("click", function() {
myElement.classList.remove("active");
});
Kode di atas akan menghapus class "active" dari elemen dengan id "myElement" saat pengguna mengkliknya.
3. Menambahkan dan Menghapus Class Secara Bersamaan
Anda juga bisa menggabungkan classList.add dan classList.remove untuk mengganti class yang ada dengan class yang baru.
Contoh:
// Mendapatkan elemen dengan id "myElement"
const myElement = document.getElementById("myElement");
// Mengganti class "inactive" dengan class "active" saat diklik
myElement.addEventListener("click", function() {
myElement.classList.remove("inactive");
myElement.classList.add("active");
});
Kode di atas akan menghapus class "inactive" dan menambahkan class "active" ke elemen dengan id "myElement" saat pengguna mengkliknya.
4. Menggunakan classList.toggle
Metode classList.toggle memudahkan kita untuk menambahkan atau menghapus class berdasarkan keberadaan class tersebut pada elemen.
Contoh:
// Mendapatkan elemen dengan id "myElement"
const myElement = document.getElementById("myElement");
// Menambahkan atau menghapus class "active" saat diklik
myElement.addEventListener("click", function() {
myElement.classList.toggle("active");
});
Kode di atas akan menambahkan class "active" jika class tersebut belum ada pada elemen. Jika class "active" sudah ada, maka class tersebut akan dihapus.
Kesimpulan
Menambahkan class CSS dengan JavaScript adalah cara yang efektif untuk mengubah tampilan elemen HTML secara dinamis. Dengan memahami metode classList.add, classList.remove, dan classList.toggle, Anda dapat membuat halaman web yang lebih interaktif dan responsif.