Die classList-Eigenschaft

Die Eigenschaft classList enthält ein Pseudo-Array der CSS-Klassen eines Elements und ermöglicht es auch, Klassen hinzuzufügen und zu entfernen sowie das Vorhandensein einer bestimmten Klasse unter den Klassen des Elements zu überprüfen.

Es handelt sich um das Attribut class, in dem mehrere Klassen durch Leerzeichen getrennt geschrieben werden können, z.B. www ggg zzz. Mit classList kann man beispielsweise die Klasse ggg entfernen, ohne die anderen Klassen zu beeinträchtigen.

Syntax

javascriptelement.classList;

Beispiel . Anzahl der Klassen

Lassen Sie uns die Anzahl der Klassen des Elements ermitteln:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Ergebnis der Codeausführung:

javascript3

Beispiel . Klassen durchlaufen

Lassen Sie uns die Klassen des Elements nacheinander ausgeben:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

Ergebnis der Codeausführung:

javascript'www'
'ggg'
'zzz'

Siehe auch