Mengganti kelas CSS dengan classList

Property classList berisi daftar kelas CSS sebuah elemen, dengan method add untuk menambah, remove untuk membuang, contains untuk memeriksa, dan toggle untuk membalik. Menggantinya lewat classList membuat tampilan diatur CSS, bukan ditulis ulang di JavaScript.

const kartu = document.querySelector("#kartu-stok");

kartu.classList.add("habis");
kartu.classList.remove("aman");
console.log(kartu.classList.contains("habis")); // true

Pembagian pekerjaannya jelas: JavaScript memutuskan nama kelas dari data, CSS memutuskan tampilan kelas itu. Warna baru, huruf tebal, atau lencana kecil ditambahkan dengan menyunting berkas CSS saja, tanpa menyentuh logikanya. Pola yang sama dipakai untuk menandai baris tabel yang jatuh tempo, menyembunyikan bagian formulir dengan menambahkan kelas tersembunyi, atau memberi tanda pada menu yang sedang aktif.

Method toggle membalik keadaan: ada menjadi tidak ada, tidak ada menjadi ada. Tombol yang membuka dan menutup panel filter cukup memanggil panel.classList.toggle("terbuka") pada setiap klik, tanpa menyimpan sendiri catatan apakah panelnya sedang terbuka.