De classList Eigenschap

De eigenschap classList bevat een pseudo-array van CSS-klassen van het element, en maakt het ook mogelijk om klassen toe te voegen en te verwijderen, en de aanwezigheid van een specifieke klasse te controleren.

Het gaat over het class attribuut, waarin je meerdere klassen kunt schrijven, gescheiden door spaties, bijvoorbeeld www ggg zzz. Met classList kun je bijvoorbeeld de klasse ggg verwijderen, zonder de andere klassen aan te raken.

Syntaxis

element.classList;

Voorbeeld . Aantal klassen

Laten we het aantal klassen van het element achterhalen:

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

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

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

Resultaat van de code:

3

Voorbeeld . Klassen doorlopen

Laten we de klassen van het element een voor een weergeven:

<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);
}

Resultaat van de code:

'www'
'ggg'
'zzz'

Zie ook

de methode classList.add,
die een opgegeven klasse toevoegt
de methode classList.remove,
die een opgegeven klasse verwijdert
de methode classList.contains,
die controleert op een opgegeven klasse
de methode classList.toggle,
die een opgegeven klasse wisselt