DOMTokenList: toggle()-Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die toggle()-Methode der DOMTokenList-Schnittstelle entfernt ein vorhandenes Token aus der Liste und gibt false zurück. Wenn das Token nicht existiert, wird es hinzugefügt und die Funktion gibt true zurück.
Syntax
toggle(token)
toggle(token, force)
Parameter
token-
Ein String, der das Token repräsentiert, das Sie umschalten möchten.
forceOptional-
Wenn eingeschlossen, verwandelt es den Toggle in eine Einweg-Operation. Wenn auf
falsegesetzt, wirdtokennur entfernt, aber nicht hinzugefügt. Wenn auftruegesetzt, wirdtokennur hinzugefügt, aber nicht entfernt.
Rückgabewert
Ein Boolean-Wert, true oder false, der angibt, ob das token nach dem Aufruf in der Liste enthalten ist oder nicht.
Beispiele
Umschalten einer Klasse bei Klick
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:
Setzen des force-Parameters
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);
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-domtokenlist-toggle① |
Browser-Kompatibilität
Loading…