classList – CSS Klassen für Animationen setzen, entfernen, wechseln

Feb 2026

classList ist eine Liste von CSS-Klassen eines Elements und fügt dem Element neue CSS-Klassen hinzu, ersetzt eine Klasse durch eine andere, entfernt sie oder schaltet im Wechseln Klassen ein und aus (toggle). classList.contains testet, ob ein Element eine Klasse enthält.

classList.add() und remove() – einfacher Auslöser für Animationen

CSS-Klassen legen Stile, Transitionen und Animationen elegant für ganze Gruppen von HTML-Elementen fest. Mit classList setzt JavaScript Klassen in Funktion, deaktiviert sie und schaltet Klassen einfach ein und aus. Das ist die Basis für zahlreichen CSS-Animationen: Eine CSS-Klasse hinzufügen, CSS-Klasse entfernen, Klasse toggeln.

const stift = document.querySelector(".stift");

let gedreht = false;

stift.addEventListener("click", function () {
	if (!gedreht) {
		this.classList.remove("unturn");
		this.classList.add("turn");
	} else {
		this.classList.remove("turn");
		this.classList.add("unturn");
  }
	gedreht = !gedreht;
});

classList Methoden und Eigenschaften

classList.add (): fügt der classList eine neue Klasse hinzu
classList.remove (): entfernt eine Klasse aus der classList, ohne die übrigen Klassen zu beeinflussen.
classList.toggle (): toggelt eine Klasse in die classList bzw. hinaus. Beim ersten Aufruf wird die Klasse eingeschaltet, beim zweiten Aufruf wird die Klasse entfernt.
classList.contains (): prüft, ob eine Klasse in der classList liegt
classList.item (): gibt die Klasse an der angegebenen Position innerhalb der Liste zurück
classList.toString (): wandelt die Liste in einen String um
classList.length: gibt die Zahl der Klassen in der classList an
classList.value: gibt eine Zeichenkette zurück, die alle CSS-Klassen des Elements enthält.

classList.toggle – Zoom In mit Wechsel der CSS-Klasse

Das Ein- und Ausschalten einer CSS-Klasse wird als toggle bezeichnet und bringt Transitions und kleine Animationen mit wenigen Zeilen ans Laufen. Das Vergrößern des Bildes – Zoom In – wird vom IntersectionObserver ausgelöst, wenn das Bild in den Viewport kommt.

<div class="zoomIn">
	<img src="kaefer-1500.webp" alt="Bild zoomen" loading="lazy"
		  width="1500" height="1187"
		srcset="kaefer-720.webp 600w,
				kaefer-1500.webp 980w"
		sizes="100cqi">
</div>

Das CSS für das Einzoomen des Bildes:

.zoomIn {
  overflow: hidden;      /* wichtig! */
}

.zoomIn img {
  transition: transform 5s ease;
  transform: scale(1);
}

.zoomIn.image-scaling img {
  transform: scale(1.8);
}

Bild zoomen, wenn es in den Viewport kommt

const imgScale = document.querySelectorAll(".zoomIn");

const imgScaleObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.target.classList.toggle(
      "image-scaling",
      entry.isIntersecting
    );
  });
}, {
  threshold: 0.5   // startet bei 50% Sichtbarkeit
});

imgScale.forEach(el => imgScaleObserver.observe(el));

classList.toggle hat einen Seelenverwandten: toggleAttribute, das ein Boolean-Attribut wie hidden entfernt, wenn es gesetzt ist oder hinzufügt, wenn es nicht gesetzt ist.

classList iterieren / durchlaufen

Ein Blick in die Browser-Konsole zeigt die Methoden und Eigenschaften des classList-Objekts.

<div class="nodelist fruits gallery nocaption">
…
</div>

elem.classList gibt alle CSS-Klassen eines Elements als Array-ähnliche DOMTokenList zurück.

console.log ("nodelist", document.querySelector (".nodelist").classList);


▼ nodelist
  ▼ DOMTokenList
    S 0: "nodelist"
    S 1: "fruits"
    S 2: "gallery"
    S 3: "nocaption"
    N length: 4
    S value: "nodelist fruits gallery nocaption"
  ▼ DOMTokenList Prototype
    F contains ()
    F entries ()
    F forEach ()
    F item ()
    F keys ()

Die DOMTokenList hat eine Länge und unterstützt Array-Methoden höherer Ordnung; mit forEach () iteriert das Skript über die Liste der CSS-Klassen eines Elements.

const items = document.querySelector (".nodelist").classList;

items.forEach ((item, index) => {
	console.log ("items index", item, index)
});

Am Rande: for of – die echte Iterator-Schleife aus ES6, iteriert über Werte, nicht über Keys, unterstützt break und continue.

elem . classList . contains

jQuery hatte die wunderbare Methode hasClass. Mit purem Javascript (Vanilla) war der Test, ob ein Element eine bestimmte Klasse aufweist, immer Würfeln ohne Sechser.

contains() gibt true oder false zurück, je nachdem, ob die Klasse in der Liste der Klassen des Elements enthalten ist oder nicht.

<img id="elem" class="bird1 bird2 bird3" … />
…
if (elem.classList.contains('bird1')) {
}

classList.item

elem.classList.item() gibt den Namen der Klasse an einer Position zurück. classList.item() ist kein Array, also keine eckigen Klammern!

Mehrere Klassen mit classList einsetzen

Die einzelnen Klassen müssen in Hochkommas und von Kommas getrennt geschrieben werden.

const b2 = document.getElementById('b2');
b2.classList.add('bird1','bird1','bird1');

Der Aufruf

console.log (document.querySelector('#b2').classList);

liefert

DOMTokenList
0: "bird1"
1: "bird2"
2: "bird3"
constructor: DOMTokenListConstructor
length: 3

classList vs setAttribute

Das modernere classList hat sich gegenüber setAttribute durchgesetzt, denn classList arbeitet semantisch auf Klassenebene, während setAttribute blind ein Attribut als String ersetzt und dabei alle bestehenden Klassen überschreibt.

<div class="card dark selected">

setAttribut bindet Javascript hat an das HTML und ist nur schwer erweiterbar. Die Fronten sind geklärt:

Aspekt	classList	setAttribute('class')
Klassen hinzufügen	✅ sicher	❌ überschreibt
Klassen entfernen	✅ gezielt	❌ umständlich
Toggle / State	✅ eingebaut	❌ manuell
Lesbarkeit	✅ hoch	❌ niedrig
Fehleranfällig	❌ gering	⚠️ hoch
Modernes JS	✅ Standard	❌ Legacy-Stil