CSS-Klassen dynamisch verwalten

Mit classList steuerst du CSS-Klassen per JavaScript – ohne den gesamten class-String von Hand zu bauen. So änderst du Aussehen und Zustand von Elementen gezielt und übersichtlich.

classList.add()

Mit classList.add() fügst du eine oder mehrere Klassen hinzu. Existiert die Klasse schon, passiert nichts – sie wird nicht doppelt gesetzt.

CSS Klassen

1.box {
2    padding: 1rem;
3    background-color: red;
4    width: 100px;
5    height: 100px;
6  }
7
8.aktiv {
9   border: 3px solid blue;
10  }

HTML

1<div class="box">
2  <p>Eine Box</p>
3</div>
4<button onclick="klickHandler()">Aktiviere CSS Klasse aktiv</button>

classList.add()

1 function klickHandler() {
2   const box = document.querySelector(".box");
3   box.classList.add("aktiv");
4   // mehrere Klassen auf einmal:
5   // box.classList.add("aktiv", "hervorgehoben");
6  };

Output

Eine Box

classList.remove()

CSS Klassen

1.box {
2    padding: 1rem;
3    background-color: red;
4    width: 100px;
5    height: 100px;
6  }
7
8.aktiv {
9   border: 3px solid blue;
10  }

HTML

1<div className="box aktiv">
2    <p>Eine Box</p>
3  </div>
4  <button onClick="klickHandler()">Deaktiviere CSS Klasse aktiv</button>

Javascript

1  function klickHandler() {
2    const box = document.querySelector(".box");
3    box.classList.remove("aktiv");
4    // mehrere Klassen auf einmal:
5    // box.classList.remove("aktiv", "hervorgehoben");
6   }
7 }

classList.remove() entfernt eine oder mehrere Klassen. Fehlt die Klasse, ist das kein Fehler – der Aufruf bleibt wirkungslos.

Output

Eine Box

classList.toggle()

classList.toggle() schaltet eine Klasse um: Ist sie gesetzt, wird sie entfernt – sonst hinzugefügt. Ideal für Menüs, Dark Mode oder aktive Buttons.

CSS Klassen

1.box {
2    padding: 1rem;
3    background-color: red;
4    width: 100px;
5    height: 100px;
6  }
7
8.aktiv {
9   border: 3px solid blue;
10  }

HTML

1<div className="box aktiv">
2    <p>Eine Box</p>
3  </div>
4  <button onClick="klickHandler()">Deaktiviere/aktiviere CSS KLasse</button>

classList.toggle()

1const box = document.querySelector(".box");
2  function klickHandler() {
3   const box = document.querySelector(".box");
4   box.classList.toggle("aktiv");
5}

Output

Eine Box

classList.replace()

Mit classList.replace() tauschst du eine vorhandene Klasse gegen eine andere. Gibt es die alte Klasse nicht, bleibt alles unverändert.

classList.replace()

1const status = document.querySelector(".status");
2
3status.classList.replace("offen", "geschlossen");

Output

item1
item1

classList.contains()

classList.contains() prüft, ob eine Klasse gesetzt ist, und liefert true oder false. Damit kannst du Logik abhängig vom aktuellen Zustand steuern.

classList.contains()

1const box = document.querySelector(".box");
2
3if (box.classList.contains("aktiv")) {
4    console.log("Die Klasse aktiv ist gesetzt.");
5} else {
6    console.log("Die Klasse aktiv fehlt.");
7}

Output

Wenn Klasse gesetzt ist: Die Klasse aktiv ist gesetzt.

Wenn Klasse nicht gesetzt ist: Die Klasse aktiv fehlt.

Im nächsten Kapitel lernst du: Attribute dynamisch ändern