Mengganti kelas CSS dengan classList

Tujuan: Pengguna dapat memilih nama kelas dari data dan memasangnya lewat classList.

±8 menitDiperiksa 2026-09-22

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

Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Sumber

MDN — Element.classList (situs lain)
MDN — Document.querySelector (situs lain)

Materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners (2-js-basics, 4-typing-game, 7-bank-project) (MIT), Exercism — jalur JavaScript (MIT). Rincian perubahan ada di halaman kelas.