Vlastnost classList

Vlastnost classList obsahuje pseudopole CSS tříd elementu a také umožňuje přidávat a odstraňovat třídy elementu, kontrolovat přítomnost určité třídy mezi třídami elementu.

Jedná se o atribut class, uvnitř kterého lze psát několik tříd mezerou oddělených, například www ggg zzz. Pomocí classList lze odstranit, kupříkladu, třídu ggg, aniž by byly dotčeny ostatní třídy.

Syntaxe

javascriptelement.classList;

Příklad . Počet tříd

Zjistíme počet tříd elementu:

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

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

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

Výsledek provedení kódu:

javascript3

Příklad . Procházíme třídy

Vypíšeme postupně třídy elementu:

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

Výsledek provedení kódu:

javascript'www'
'ggg'
'zzz'

Viz také