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

javascriptelementti.classList;

Esimerkki . Luokkien määrä

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

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

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

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

Koodin suorituksen tulos:

javascript3

Esimerkki . Luetellaan luokat

Tulostetaan elementin luokat yksitellen:

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

Koodin suorituksen tulos:

javascript'www'
'ggg'
'zzz'

Katso myös