by 
Mengubah tampilan elemen lewat kelas CSS jauh lebih rapi daripada mengubah style satu per satu. Artikel ini membahas cara menambahkan kelas CSS ke elemen di JavaScript.
Metode classList.add()
<script>
const el = document.getElementById("kotak");
el.classList.add("aktif");
el.classList.add("besar", "merah"); // beberapa sekaligus
</script>
classList aman karena tidak menimpa kelas yang sudah ada, berbeda dengan mengubah className langsung.
Contoh Kasus: Menandai Item Aktif di Menu
<script>
document.querySelectorAll(".menu-item").forEach(item => {
item.addEventListener("click", function() {
// hapus aktif dari semua, tambahkan ke yang diklik
document.querySelectorAll(".menu-item").forEach(i => i.classList.remove("aktif"));
this.classList.add("aktif");
});
});
</script>
Metode classList Lainnya
| Metode | Fungsi |
|---|---|
| add() | Menambah kelas |
| remove() | Menghapus kelas |
| toggle() | Menambah/menghapus otomatis |
| contains() | Mengecek keberadaan kelas |
Kesimpulan
Gunakan classList.add() untuk menambah kelas CSS tanpa menimpa yang lama. Padukan dengan remove() dan toggle() untuk pola umum seperti menandai item menu yang sedang aktif.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).
