Свойство classList

Свойство classList содержит псевдомассив CSS классов элемента, а также позволяет добавлять и удалять классы элемента, проверять наличие определенного класса среди классов элемента.

Речь идет об атрибуте class, внутри которого можно писать несколько классов через пробел, например www ggg zzz. С помощью classList можно удалить, к примеру, класс ggg, не затронув остальные классы.

Синтаксис

javascriptэлемент.classList;

Пример . Количество классов

Узнаем количество классов элемента:

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

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

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

Результат выполнения кода:

javascript3

Пример . Перебираем классы

Выведем по очереди классы элемента:

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

javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

Результат выполнения кода:

javascript'www'
'ggg'
'zzz'

Смотрите также