Свойство classList

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

Синтаксис

элемент.classList

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

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

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

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

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

Выведем столбец классов элемента:

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

for (let className of classNames) {
document.write(className + '
');
}

Метод add объекта classList

Метод add объекта classList позволяет добавлять CSS классы элементу.

Синтаксис

элемент.classList.add(класс);

Пример 3

Добавим элементу класс kkk:

let elem = document.querySelector('#elem');
elem.classList.add('kkk');

Пример 4

Добавим элементу класс zzz, который уже есть в элементе - ничего не произойдет, так как дубли классов не добавляются:

let elem = document.querySelector('#elem');
elem.classList.add('zzz');

Метод remove объекта classList

Метод remove объекта classList удаляет заданный CSS класс элемента.

Синтаксис

элемент.classList.remove(класс);

Пример 5

Удалим класс ggg:

let elem = document.querySelector('#elem');
elem.classList.remove('ggg');

Метод contains объекта classList

Метод contains объекта classList проверяет наличие CSS класса элемента.

Синтаксис

элемент.classList.contains(класс);

Пример 6

Проверим, есть ли у элемента класс ggg:

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

let contains = elem.classList.contains('ggg');
console.log(contains);

Метод toggle объекта classList

Метод toggle объекта classList чередует заданный CSS класс элемента: добавляет класс, если его нет и удаляет, если есть.

Синтаксис

элемент.classList.toggle(класс);

Пример 7

В данном примере при использовании метода toggle класс zzz удалится, так как он уже есть в элементе:

let elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Пример 8

В данном примере при использовании метода toggle класс zzz добавится, так как его нету в элементе:

let elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

статья взята с сайта:

code.mu

Обсуждение закрыто.