classList-ominaisuus

Ominaisuus classList sisältää pseudotaulukon elementin CSS-luokista, ja sen avulla voit lisätä ja poistaa elementin luokkia, tarkistaa tietyn luokan olemassaolon elementin luokkien joukossa.

Kyse on attribuutista class, johon voit kirjoittaa useita luokkja välilyönnillä erotettuna, esimerkiksi www ggg zzz. classList:n avulla voit poistaa, esimerkiksi luokan ggg, koskematta muihin luokkiin.

Syntaksi

elementti.classList;

Esimerkki . Luokkien määrä

Selvitetään elementin luokkien määrä:

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

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

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

Koodin suorituksen tulos:

3

Esimerkki . Luetellaan luokat

Tulostetaan elementin luokat yksitellen:

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

Koodin suorituksen tulos:

'www'
'ggg'
'zzz'

Katso myös

metodi classList.add,
joka lisää määritetyn luokan
metodi classList.remove,
joka poistaa määritetyn luokan
metodi classList.contains,
joka tarkistaa määritetyn luokan
metodi classList.toggle,
joka vuorottelee määritetyn luokan