HTML DOM classEigenschaft

元素对象参考手册Element-Objekt

Beispiele

Fügen Sie dem <div>-Element eine Klasse hinzu:

document.getElementById("myDIV").classList.add("mystyle");

Selbst ausprobieren »

Definition und Verwendung

Die classList-Eigenschaft gibt den/die Klassennamen eines Elements als DOMTokenList-Objekt zurück.

Diese Eigenschaft wird verwendet, um CSS-Klassen bei einem Element hinzuzufügen, zu entfernen und umzuschalten.

Die classList-Eigenschaft ist schreibgeschützt, aber Sie können sie mit den Methoden add() und remove() ändern.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Eigenschaft
classList 8.0 10.0 3.6 5.1 11.5

Syntax

element.classList

Eigenschaften

Eigenschaft Beschreibung
length Gibt die Anzahl der Klassen in der Klassenliste zurück.

Diese Eigenschaft ist schreibgeschützt.

Methoden

Methode Beschreibung
add(class1, class2, ...) Fügt einem Element einen oder mehrere Klassennamen hinzu.

Wenn der angegebene Klassenname bereits vorhanden ist, wird er nicht hinzugefügt.
contains(class) Gibt einen booleschen Wert zurück, der bestimmt, ob der angegebene Klassenname vorhanden ist.

Mögliche Werte:

  • true - Das Element enthält bereits den Klassennamen.
  • false - Der Klassenname existiert nicht im Element.
item(index) Gibt den Klassennamen am angegebenen Index im Element zurück. Der Index beginnt bei 0.

Wenn der Index außerhalb des gültigen Bereichs liegt, gibt er null zurück.null
remove(class1, class2, ...) Entfernt einen oder mehrere Klassennamen aus einem Element.

Hinweis:Das Entfernen eines Klassennamens, der nicht existiert, verursacht keinen Fehler.
toggle(class, true|false) Schaltet einen Klassennamen in einem Element um.

Der erste Parameter ist der Klassenname, der aus dem Element entfernt werden soll, und gibt false zurück.
Wenn der Klassenname nicht existiert, wird er dem Element hinzugefügt und gibt true zurück.

Der zweite Parameter ist optional, ein boolescher Wert, mit dem erzwungen wird, ob das Element die Klasse hinzufügen oder entfernen soll, unabhängig davon, ob der Klassenname existiert. Zum Beispiel:

Eine Klasse entfernen:element.classList.toggle("classToRemove", false);
Eine Klasse hinzufügen:element.classList.toggle("classToAdd", true);

Hinweis:Internet Explorer oder Opera 12 und frühere Versionen unterstützen den zweiten Parameter nicht.

Technische Details

Rückgabewert: Eine DOMTokenList, die die Liste der Klassennamen des Elements enthält.
实例

Weitere Beispiele

Beispiel

Mehrere Klassen zum <div>-Element hinzufügen:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Selbst ausprobieren »

Beispiel

Eine Klasse aus dem <div>-Element entfernen:

document.getElementById("myDIV").classList.remove("mystyle");

Selbst ausprobieren »

Beispiel

Mehrere Klassen aus dem <div>-Element entfernen:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Selbst ausprobieren »

Beispiel

Eine Klasse auf dem <div>-Element umschalten:

document.getElementById("myDIV").classList.toggle("newClassName");

Selbst ausprobieren »

Beispiel

Ermitteln Sie die Klassennamen des <div>-Elements:

<div id="myDIV" class="mystyle anotherClass thirdClass">Ich bin ein DIV-Element</div>

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

xDas Ergebnis ist:

mystyle anotherClass thirdClass

Selbst ausprobieren »

Beispiel

Sehen Sie, wie viele Klassennamen das <div>-Element hat:

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

xDas Ergebnis ist:

3

Selbst ausprobieren »

Beispiel

Ermitteln Sie den ersten Klassennamen (Index 0) des <div>-Elements:

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

xDas Ergebnis ist:

mystyle

Selbst ausprobieren »

Beispiel

Prüfen Sie, ob das Element die Klasse "mystyle" hat:

var x = document.getElementById("myDIV").classList.contains("mystyle");

xDas Ergebnis ist:

wahr

Selbst ausprobieren »

Beispiel

Prüfen Sie, ob das Element die Klasse "mystyle" hat; wenn sie vorhanden ist, entfernen Sie einen anderen Klassennamen:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Konnte es nicht finden.");
}

Selbst ausprobieren »

Ähnliche Artikel

CSS-Tutorial:CSS-Selektoren

CSS-Referenz:CSS .classSelektoren

HTML-DOM-Referenz:HTML-DOM-className-Eigenschaft

HTML-DOM-Referenz:HTML-DOM-getElementsByClassName()-Methode

HTML-DOM-Referenz:HTML-DOM-Style-Objekt

元素对象参考手册Element-Objekt

Andere Erweiterungen