Beispiel
Fügen Sie die "mystyle" Klasse zu einem <div> Elemente:
document.getElementById("myDIV").classList.add("mystyle");
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die classlist Eigenschaft gibt die name(s) ein Element, als DOMTokenList Objekt.
Diese Eigenschaft ist nützlich, um hinzuzufügen, zu entfernen und CSS-Klassen auf einem Element zu wechseln.
Die Eigenschaft classlist ist schreibgeschützt, aber Sie es mithilfe des ändern können add() und remove() Methoden.
Cross-Browser - Lösung: Die classlist Eigenschaft wird in IE9 und früher nicht unterstützt. Sie können jedoch die Verwendung classname Eigenschaft oder reguläre Ausdrücke für eine Cross-Browser - Lösung (siehe "More Examples" am Ende dieser Seite).
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Eigentum | |||||
---|---|---|---|---|---|
classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
Syntax
element .classList
Eigenschaften
Eigentum | Beschreibung |
---|---|
length | Gibt die Anzahl der Klassen in der Liste. Diese Eigenschaft ist schreibgeschützt |
Methods
Methode | Beschreibung |
---|---|
add( class1, class2, ... ) | Fügt einen oder mehr Klassennamen auf ein Element. Wenn die angegebene Klasse bereits vorhanden ist, wird nicht die Klasse hinzugefügt werden |
contains( class ) | Gibt einen Booleschen Wert, der angibt, ob ein Element der angegebenen Klasse Namen hat. Mögliche Werte:
|
item( index ) | Gibt die Klassennamen mit einem bestimmten Indexnummer von einem Elemente. Index beginnt bei 0. Gibt null zurück , wenn der Index außerhalb des zulässigen Bereichs |
remove( class1, class2, ... ) | Entfernt einen oder mehr Klassennamen von einem Elemente. Hinweis: eine Klasse zu entfernen , die nicht vorhanden ist , wirft einen Fehler nicht |
toggle( class, true|false) | Schaltet zwischen einem Klassennamen für ein Element. Der erste Parameter entfernt die angegebene Klasse von einem Element und gibt false zurück. Wenn die Klasse nicht vorhanden ist, wird es zu dem Element hinzugefügt, und der Rückgabewert ist wahr. Der optionale zweite Parameter ist ein boolescher Wert, der die Klasse zwingt hinzugefügt oder entfernt werden, unabhängig davon, ob sie bereits existierte. Beispielsweise: Entfernen Sie eine Klasse: Element .classList. toggle("classToRemove", false) ; Fügen Sie eine Klasse: Element .classList. toggle("classToAdd", true) ; Hinweis: Der zweite Parameter ist in Internet Explorer oder Opera 12 und früher nicht unterstützt. |
Technische Details
Rückgabewert: | A DOMTokenList, um eine Liste der Klasse enthält , name(s) eines Elements |
---|
Mehr Beispiele
Beispiel
Fügen Sie mehrere Klassen zu einem <div> Elemente:
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass");
Versuch es selber " Beispiel
Entfernen Sie eine Klasse von einem <div> Elemente:
document.getElementById("myDIV").classList.remove("mystyle");
Versuch es selber " Beispiel
Entfernen Sie mehrere Klassen von einem <div> Elemente:
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass");
Versuch es selber " Beispiel
Umschalten zwischen zwei Klassen für ein <div> Element:
document.getElementById("myDIV").classList.toggle("newClassName");
Versuch es selber " Beispiel
Holen Sie sich den name(s) eines <div> Element:
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;
Das Ergebnis von x wird sein:
mystyle
anotherClass thirdClass
Versuch es selber " Beispiel
Finden Sie heraus , wie viele Klassennamen ein <div> Element hat:
var x = document.getElementById("myDIV").classList.length;
Das Ergebnis von x wird sein:
3
Versuch es selber " Beispiel
Holen Sie sich den ersten Klassennamen (index 0) ein <div> Elements:
var x = document.getElementById("myDIV").classList.item(0);
Das Ergebnis von x wird sein:
mystyle
Versuch es selber " Beispiel
Finde heraus , ob ein Element eine hat "mystyle" Klasse:
var x = document.getElementById("myDIV").classList.contains("mystyle");
Das Ergebnis von x wird sein:
true
Versuch es selber " Beispiel
Finde heraus , ob ein Element eine hat "mystyle" Klasse. Wenn ja, entfernen Sie einen neuen Klassennamen:
var x = document.getElementById("myDIV");
if
(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}
Versuch es selber " Beispiel
Umschalten zwischen den Klassen einer Dropdown-Schaltfläche zu erstellen:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Versuch es selber " Rückfallbeispiel: add
Eine Browser-Lösung bei der Verwendung des classlist. add() Methode, für IE9 und früher:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
}
Versuch es selber " Fallback-Beispiel: entfernen
Eine Browser-Lösung bei der Verwendung des classlist. remove() Methode für IE9 und früher:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9
and earlier
}
Versuch es selber " Fallback-Beispiel: Enthält
Eine Browser-Lösung bei der Verwendung des classlist. contains() Methode für IE9 und früher:
var x = document.getElementById("myDIV");
if (x.classList)
{
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}
Versuch es selber " Rückfallbeispiel: Toggle
Eine Browser-Lösung bei der Verwendung des classlist. toggle() Methode für IE9:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// For IE9
var classes = x.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
}
Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS .class- Selector
HTML DOM Referenz: HTML DOM className Property
HTML DOM Referenz: HTML DOM getElementsByClassName() Methode
HTML DOM Referenz: HTML DOM Style - Objekt
<Element Object