Element: Eigenschaft classList
Die Element.classList
ist eine schreibgeschützte Eigenschaft, die eine Live-[
DOMTokenList](/de/docs/Web/API/DOMTokenList)
-Sammlung der class
-Attribute des Elements zurückgibt. Diese kann verwendet werden, um die Klassenliste zu manipulieren.
Die Verwendung von classList
ist eine bequeme Alternative zum Zugriff auf die Klassenliste eines Elements als leerzeichengetrennter String über element.className
.
Wert
Eine DOMTokenList
, die den Inhalt des class
-Attributs des Elements darstellt. Wenn das class
-Attribut nicht gesetzt oder leer ist, gibt es eine leere DOMTokenList
zurück, d.h. eine DOMTokenList
mit der Eigenschaft length
gleich 0
.
Obwohl die classList
-Eigenschaft selbst schreibgeschützt ist, können Sie die zugehörige DOMTokenList
mit den Methoden add()
, remove()
, replace()
und toggle()
modifizieren.
Sie können testen, ob das Element eine gegebene Klasse enthält, indem Sie die Methode classList.contains()
verwenden.
Beispiele
const div = document.createElement("div");
div.className = "foo";
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("another-class");
// <div class="another-class"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);
// false
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-element-classlist① |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
element.className
DOMTokenList
classList.js
(ein plattformübergreifendes JavaScript-Polyfill, daselement.classList
vollständig implementiert)