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

element.classList;

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

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

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

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

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

Výsledek provedení kódu:

3

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

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

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

Výsledek provedení kódu:

'www'
'ggg'
'zzz'

Viz také

metoda classList.add,
která přidá zadanou třídu
metoda classList.remove,
která odstraní zadanou třídu
metoda classList.contains,
která zkontroluje zadanou třídu
metoda classList.toggle,
která přepíná zadanou třídu