Die Methode toggle des classList-Objekts

Die Methode toggle des Objekts classList schaltet eine bestimmte CSS-Klasse eines Elements um: Sie fügt die Klasse hinzu, wenn sie nicht vorhanden ist, und entfernt sie, wenn sie vorhanden ist.

Syntax

javascriptelement.classList.toggle(klasse);

Beispiel

In diesem Beispiel wird bei Verwendung der Methode toggle die Klasse zzz entfernt, da sie im Element bereits vorhanden ist:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Ergebnis der Codeausführung:

html<p id="elem" class="www ggg"></p>

Beispiel

In diesem Beispiel wird bei Verwendung der Methode toggle die Klasse zzz hinzugefügt, da sie im Element nicht vorhanden ist:

html<p id="elem" class="www ggg"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Ergebnis der Codeausführung:

html<p id="elem" class="www ggg zzz"></p>

Siehe auch