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

element.classList;

Beispiel . Anzahl der Klassen

Lassen Sie uns die Anzahl der Klassen des Elements ermitteln:

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

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

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

Ergebnis der Codeausführung:

3

Beispiel . Klassen durchlaufen

Lassen Sie uns die Klassen des Elements nacheinander ausgeben:

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

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

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

Ergebnis der Codeausführung:

'www'
'ggg'
'zzz'

Siehe auch

die Methode classList.add,
die eine bestimmte Klasse hinzufügt
die Methode classList.remove,
die eine bestimmte Klasse entfernt
die Methode classList.contains,
die eine bestimmte Klasse überprüft
die Methode classList.toggle,
die eine bestimmte Klasse umschaltet