Свойство 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,
който редува зададен клас