classList în JavaScript

element.classList.add("clasa")
element.classList.remove("clasa")
element.classList.toggle("clasa")
element.classList.contains("clasa")

Ce face classList

classList este modul simplu de a schimba aspectul unui element din JavaScript: stilurile rămân în CSS, iar codul doar pune sau scoate clase.

add adaugă o clasă, remove o scoate, toggle o adaugă dacă lipsește și o scoate dacă există, iar contains verifică dacă elementul are clasa.

Ce returnează

toggle și contains returnează true sau false. Celelalte nu returnează nimic.

Exemple

Exemplul 1: Operațiile de bază

<div id="cutie" class="card"></div>

<script>
  const cutie = document.querySelector("#cutie");

  cutie.classList.add("activ", "mare");
  cutie.classList.remove("mare");
  console.log(cutie.className);
  console.log(cutie.classList.contains("activ"));
  console.log(cutie.classList.toggle("activ"));
  console.log(cutie.className);
</script>

Rezultat în browser

card activ
true
false
card

Exemplul 2: Buton pentru tema întunecată

document.querySelector("#schimba-tema").addEventListener("click", () => {
  const intunecata = document.body.classList.toggle("tema-intunecata");
  console.log(intunecata ? "Tema întunecată" : "Tema deschisă");
});

Rezultat în browser, după două clicuri

Tema întunecată
Tema deschisă

Greșeli frecvente

• Pui punct în fața numelui: classList.add(".activ") adaugă o clasă numită chiar .activ. Scrie classList.add("activ").
• Suprascrii toate clasele cu element.className = "activ" și pierzi clasele existente.

Comenzi înrudite

• addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.
• document.querySelector: Găsește primul element din pagină care se potrivește cu un selector CSS.
• document.querySelectorAll: Găsește toate elementele din pagină care se potrivesc cu un selector CSS.