Свойство 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');
статья взята с сайта: