Својството classList

Својството classList содржи псевдо-низа на CSS класи на елементот, а исто така овозможува да се додаваат и бришат класи на елементот, да се проверува присуството на одредена класа меѓу класите на елементот.

Се работи за атрибутот class, во кој може да се пишуваат неколку класи преку празно место, на пример www ggg zzz. Со помош на classList може да се избрише, на пример, класата ggg, без да се влијае на останатите класи.

Синтакса

елемент.classList;

Пример . Број на класи

Да го дознаеме бројот на класи на елементот:

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

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

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

Резултат од извршувањето на кодот:

3

Пример . Ги прелистуваме класите

Да ги испечатиме една по една класите на елементот:

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

Резултат од извршувањето на кодот:

'www'
'ggg'
'zzz'

Погледнете исто така

методот classList.add,
кој додава зададена класа
методот classList.remove,
кој брише зададена класа
методот classList.contains,
кој проверува зададена класа
методот classList.toggle,
кој менува зададена класа