HTML DOMTokenList toggle() Methode

Definition und Verwendung

Die Methode toggle() entfernt das angegebene Markenzeichen aus der Liste und gibt false zurück. Wenn das Markenzeichen nicht existiert, wird es hinzugefügt und true zurückgegeben.

Beispiel

Beispiel 1

Schalte den Zustand von "myStyle" um:

const list = element.classList;
list.toggle("mywStyle");

Selbst ausprobieren

Beispiel 2

Die Klasse "myStyle" dem Element hinzufügen:

const list = element.classList;
list.add("myStyle");

Selbst ausprobieren

Beispiel 3

Die Klasse "myStyle" aus dem Element entfernen:

const list = element.classList;
list.remove("myStyle");

Selbst ausprobieren

Beispiel 4

Mehrere Klassen zu einem Element hinzufügen:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Selbst ausprobieren

Beispiel 5

Mehrere Klassen aus einem Element entfernen:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Selbst ausprobieren

Beispiel 6

Gewinnen Sie die Anzahl der Klassen eines Elements heraus:

let numb = element.classList.length;

Selbst ausprobieren

Beispiel 7

Wechseln Sie zwischen Klassen, um einen Dropdown-Pfeil zu erstellen:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Selbst ausprobieren

Syntax

domtokenlist.toggle(Token)

Parameter

Parameter Beschreibung
Token Erforderlich. Das zu wechselnde Symbol.

Rückgabewert

Keine.

Browserunterstützung

domtokenlist.toggle() ist eine Eigenschaft von DOM Level 4 (2015).

Es wird von allen Browsern unterstützt:

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

Internet Explorer 11 (oder frühere Versionen) unterstützt nicht domtokenlist.toggle().

Verwandte Seiten

length Eigenschaft

item() Methode

add() Methode

remove() Methode

replace() Methode

forEach() Methode

entries() Methode

keys() Methode

values() Methode

DOMTokenList-Objekt