DOMTokenList: toggle()-Methode

token

Ein String, der das Token repräsentiert, das Sie umschalten möchten.

force Optional

Wenn eingeschlossen, verwandelt es den Toggle in eine Einweg-Operation. Wenn auf false gesetzt, wird token nur entfernt, aber nicht hinzugefügt. Wenn auf true gesetzt, wird token nur hinzugefügt, aber nicht entfernt.

Ein Boolean-Wert, true oder false, der angibt, ob das token nach dem Aufruf in der Liste enthalten ist oder nicht.

Im folgenden Beispiel rufen wir die Liste der auf einem <span>-Element gesetzten Klassen als DOMTokenList über Element.classList ab. Wir ersetzen dann ein Token in der Liste und schreiben die Liste in das Node.textContent des <span>-Elements.

Zuerst das HTML:

<span class="a b">classList is 'a b'</span>

Jetzt das JavaScript:

const span = document.querySelector("span");
const classes = span.classList;

span.addEventListener("click", () => {
  const result = classes.toggle("c");
  span.textContent = `'c' ${
    result ? "added" : "removed"
  }; classList is now "${classes}".`;
});

Die Ausgabe sieht so aus und wird sich bei jedem Klick auf den Text ändern:

Der zweite Parameter kann verwendet werden, um zu bestimmen, ob die Klasse enthalten ist oder nicht. Dieses Beispiel würde die Klasse 'c' nur einbeziehen, wenn das Browserfenster breiter als 1000 Pixel ist:

span.classList.toggle("c", window.innerWidth > 1000);