Menambahkan dan Menghapus Kelas CSS dengan JavaScript
JavaScript memungkinkan Anda untuk memanipulasi gaya elemen HTML secara dinamis dengan menambahkan dan menghapus kelas CSS. Ini memberikan fleksibilitas untuk mengubah tampilan dan perilaku elemen berdasarkan interaksi pengguna atau kondisi tertentu.
Menambahkan Kelas CSS
Untuk menambahkan kelas CSS ke elemen, gunakan metode classList.add(). Metode ini menerima satu atau lebih nama kelas sebagai argumen.
const element = document.getElementById("myElement");
// Menambahkan kelas "active" ke elemen
element.classList.add("active");
Menghapus Kelas CSS
Untuk menghapus kelas CSS dari elemen, gunakan metode classList.remove(). Metode ini juga menerima nama kelas sebagai argumen.
const element = document.getElementById("myElement");
// Menghapus kelas "active" dari elemen
element.classList.remove("active");
Mengganti Kelas CSS
Untuk mengganti kelas CSS yang ada, Anda dapat menggunakan kombinasi classList.remove() dan classList.add():
const element = document.getElementById("myElement");
// Mengganti kelas "active" dengan kelas "inactive"
element.classList.remove("active");
element.classList.add("inactive");
Menentukan Keberadaan Kelas
Anda dapat memeriksa apakah suatu elemen memiliki kelas tertentu dengan metode classList.contains(). Metode ini mengembalikan nilai boolean (true jika kelas ada, false jika tidak).
const element = document.getElementById("myElement");
// Mengecek apakah elemen memiliki kelas "active"
if (element.classList.contains("active")) {
console.log("Elemen memiliki kelas active");
}
Menambahkan dan Menghapus Banyak Kelas
Anda dapat menambahkan atau menghapus beberapa kelas sekaligus dengan menggunakan metode classList.add() dan classList.remove() dengan argumen tambahan.
const element = document.getElementById("myElement");
// Menambahkan beberapa kelas
element.classList.add("active", "highlight", "important");
// Menghapus beberapa kelas
element.classList.remove("active", "highlight");
Contoh Implementasi
Contoh di bawah menunjukkan bagaimana menambahkan dan menghapus kelas CSS pada tombol untuk mengubah tampilannya saat tombol diklik:
Menambahkan dan Menghapus Kelas CSS
Kesimpulan
Manipulasi kelas CSS dengan JavaScript memungkinkan Anda untuk membuat desain web yang lebih dinamis dan interaktif. Dengan menggunakan metode classList, Anda dapat mengontrol tampilan dan perilaku elemen HTML berdasarkan berbagai kondisi dan interaksi pengguna.