Vlastnosť classList

Vlastnosť classList obsahuje pseudopole CSS tried elementu, a tiež umožňuje pridávať a odstraňovať triedy elementu, kontrolovať prítomnosť určitej triedy medzi triedami elementu.

Ide o atribút class, vnútri ktorého je možné zapísať niekoľko tried medzerou oddelených, napríklad www ggg zzz. Pomocou classList je možné odstrániť, napríklad, triedu ggg, bez ovplyvnenia ostatných tried.

Syntax

element.classList;

Príklad . Počet tried

Zistíme počet tried elementu:

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

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

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

Výsledok vykonania kódu:

3

Príklad . Prechádzame triedy

Vypíšeme postupne triedy 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ýsledok vykonania kódu:

'www'
'ggg'
'zzz'

Pozri tiež

metóda classList.add,
ktorá pridáva zadanú triedu
metóda classList.remove,
ktorá odstraňuje zadanú triedu
metóda classList.contains,
ktorá kontroluje zadanú triedu
metóda classList.toggle,
ktorá strieda zadanú triedu