HTML-DOM-Eigenschaft classlist

Beispiele

Für das <div> Element Klasse hinzuzufügen:

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

Versuchen »

Definition und Verwendung

classlist-Eigenschaft gibt den Klassennamen des Elements, wie DOMTokenList Objekt.

Diese Eigenschaft wird in dem Element verwendet, um hinzuzufügen, zu entfernen und CSS-Klasse wechseln.

classlist Eigenschaft ist schreibgeschützt, aber Sie können das Add () und remove () Methode, um es zu ändern.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.

Immobilien
classlist	8.0	10.0	3.6	5.1	11.5

Grammatik

Element .classList

Eigenschaften

Immobilien	Beschreibung
Länge	Gibt die Anzahl der Klassenliste Klasse Diese Eigenschaft ist schreibgeschützt

Weg

Weg	Beschreibung
add (class1, class2, ...)	Fügen Sie eine oder mehrere Klassennamen im Element. Wenn die angegebene Klassenname bereits vorhanden ist, wird es fügen Sie nicht / td>
enthält (Klasse)	Gibt einen Booleschen Wert, wird bestimmt, ob die Anwesenheit der angegebenen Klassennamen. Mögliche Werte: true - Element Paket enthält bereits einen Klassennamen false - Element existiert nicht in dem Klassennamen
Artikel (Index)	Gibt den Klassennamen in dem Elementindexwert. Die Indexwerte beginnen bei Null. Wenn der Indexwert ist oder null außerhalb des Bereichs des zulässigen Bereichs
entfernen (class1, class2, ...)	Entfernen Sie ein oder mehrere Elemente des Klassennamens. Hinweis: den Klassennamen Entfernen nicht vorhanden ist , beschwert sich nicht.
Toggle (Klasse, true \| false)	Schaltklassennamen im Element. Der erste Parameter ist der Name der Klasse, die Sie das Element entfernen möchten, und gibt false zurück. Wenn der Klassenname nicht vorhanden ist, wird es die Klassennamen in dem Element hinzufügen, und gibt true zurück. Der zweite ist ein optionaler Parameter ist ein boolescher Wert, der verwendet wird, um festzulegen, ob das Element obligatorisch Kategorien hinzuzufügen oder zu entfernen, unabhängig von der Klassenname existiert. Zum Beispiel: Entfernen Sie eine Klasse: Element .classList.toggle ( "classToRemove" , false); Fügen Sie eine Klasse: Element .classList.toggle ( "classToAdd" , true); Hinweis: Internet Explorer oder Opera 12 und früheren Versionen nicht den zweiten Parameter unterstützen.

Technische Beschreibung

Rückkehr:	Ein DOMTokenList, Klassennamenliste enthält Elemente

Weitere Beispiele

Beispiele

Für das <div> Element, um weitere Kategorien hinzu:

document.getElementById ( "myDiv") .classList.add ( "mystyle", "Andere", "thirdClass");

Versuchen »

Beispiele

Entfernen Sie eine Klasse für das <div> Element:

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

Versuchen »

Beispiele

Für das <div> Element mehrere Klassen zu entfernen:

document.getElementById ( "myDiv") .classList.remove ( "mystyle", "Andere", "thirdClass");

Versuchen »

Beispiele

Für das <div> Elementkategorien zu wechseln:

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

Versuchen »

Beispiele

Holen Sie sich das Klassennamen <div> Element:

<Div id = "myDiv" class = "mystyle Andere thirdClass"> Ich bin ein DIV - Element </ div>

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

x Der Ausgang ist:

mystyle Andere thirdClass

Versuchen »

Beispiele

Siehe <div> Element hat eine Reihe von Klassennamen:

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

x Der Ausgang ist:

Versuchen »

Beispiele

Holen <div> Element in einem ersten Klassennamen (Index 0):

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

x Der Ausgang ist:

mystyle

Versuchen »

Beispiele

Siehe Element vorhanden ist "mystyle" Kategorie:

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

x Der Ausgang ist:

wahr

Versuchen »

Beispiele

Siehe Element vorhanden ist "mystyle" Kategorie, falls vorhanden entfernen andere Klassenname:

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

if (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "Andere");
} Else {
alert ( "es nicht finden konnte. ");
}

Versuchen »