classList Egenskaben

Egenskaben classList indeholder en pseudomatrise af elementets CSS-klasser og giver også mulighed for at tilføje og fjerne elementets klasser, kontrollere tilstedeværelsen af en bestemt klasse blandt elementets klasser.

Det drejer sig om attributten class, hvor man kan skrive flere klasser adskilt af mellemrum, for eksempel www ggg zzz. Med classList kan man fjerne, for eksempel, klassen ggg, uden at berøre de øvrige klasser.

Syntaks

element.classList;

Eksempel . Antal klasser

Lad os finde ud af antallet af klasser på et element:

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

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

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

Resultatet af kodeudførelsen:

3

Eksempel . Gennemgår klasser

Lad os udskrive elementets klasser en efter en:

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

Resultatet af kodeudførelsen:

'www'
'ggg'
'zzz'

Se også

metoden classList.add,
som tilføjer en given klasse
metoden classList.remove,
som fjerner en given klasse
metoden classList.contains,
som kontrollerer en given klasse
metoden classList.toggle,
som skifter en given klasse