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.

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

classList.remove()

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

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

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.

1const box = document.querySelector(".box");
2
3box.classList.toggle("aktiv");
4// Klasse ist da → wird entfernt
5// Klasse fehlt → wird hinzugefügt

classList.replace()

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

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

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.

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}