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