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 July 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.
force
Optional-
Wenn eingeschlossen, verwandelt es den Toggle in eine Einweg-Operation. Wenn auf
false
gesetzt, wirdtoken
nur entfernt, aber nicht hinzugefügt. Wenn auftrue
gesetzt, wirdtoken
nur 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 Standard # ref-for-dom-domtokenlist-toggle① |
Browser-Kompatibilität
BCD tables only load in the browser