HTML DOM classList Eigenschaft

HTML DOM Element-Objekt

classListDer schreibgeschützte Attribut gibt die aktuelle DOMTokenList-Sammlung des class-Attributs des Elements zurück.

classList-Attribut ist nützlich, um CSS-Klassen auf dem Element hinzuzufügen, zu entfernen und umzuschalten.

Dieses Attribut ist schreibgeschützt, obwohl Sie es mit den Methoden add() und remove() ändern können.

classList ist eine bequeme Alternative, dieclassNameLesen Sie die Klassenliste des Elements durch eine durch Leerzeichen getrennte Zeichenfolge.

Syntax:

element.classList

var elem = document.getElementById("x");
elem.classList.add("para");

Browserkompatibilität

Die Nummer in der Tabelle gibt die erste Browserversion an, die das classList-Attribut vollständig unterstützt:

Eigenschaft

Methode

Technische Details

Mehr Beispiele

Fügen Sie mehrere Klassen zum <p>-Element hinzu:

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Entfernen Sie eine Klasse aus dem <p>-Element:

var elem = document.getElementById("x");
elem.classList.remove("para");

Entfernen Sie mehrere Klassen aus dem <p>-Element:

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Schalten Sie zwischen zwei Klassen des <p>-Elements um:

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Geben Sie die Klassennamen des <p>-Elements zurück, die es hat:

var len = document.getElementById("x").classList.length;

Geben Sie den Klassennamen des <p>-Elements zurück:

var name = document.getElementById("x").classList;

Geben Sie den ersten Klassennamen des <p>-Elements (Index 0) zurück:

var name = document.getElementById("x").classList[0];

Verwenden Sie die Methode item() zurück, um den ersten Klassennamen des <p>-Elements (Index 0) zu erhalten:

var name = document.getElementById("x").classList.item(0);

Finden Sie heraus, ob das Element die Klasse "shadow" hat:

var list = document.getElementById("x").classList;
if　(list.contains("shadow"))　{
alert("Yes!!!　Das　P　Element enthält　'shadow'　class");
}　else　{
alert("No　'shadow'　class　found");　　　
}

Wechseln Sie eine Klasse ("open"), um seitliche Navigationsknöpfe zu erstellen:

Zusammenhängende Referenzen

CSS教程：CSS Selektor

CSS Referenz:CSS#idSelektor

CSS Referenz: CSS .class Selektor

HTML DOM Referenz:HTML DOM className Eigenschaft

HTML DOM Referenz:HTML DOM getElementsByClassName() Methode

HTML DOM Referenz:HTML DOM getElementById() Methode

HTML DOM Referenz:HTML DOM querySelector() Methode

HTML DOM Element-Objekt