Neueste Web-Entwicklung Tutorials
 

HTML DOM classList Propery

<Element Object

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:

  • true - das Element enthält die angegebenen Klassennamen
  • false - der Elementname nicht die angegebene Klasse enthalten
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
Beispiele

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