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

javascriptelement.classList;

Eksempel . Antal klasser

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

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

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

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

Resultatet af kodeudførelsen:

javascript3

Eksempel . Gennemgår klasser

Lad os udskrive elementets klasser en efter en:

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

Resultatet af kodeudførelsen:

javascript'www'
'ggg'
'zzz'

Se også