Element: свойство classList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨октябрь 2017 г.⁩.

Описание

Element.classList — это доступное только для чтения свойство, которое содержит текущую коллекциюDOMTokenList всех атрибутовclass элемента.

ИспользованиеclassList представляет более удобный способ, чем доступ к списку классов элемента в виде строки, разделенной пробелами, черезelement.className.

DOMTokenList представляет содержимое атрибутаclass элемента. Если атрибутclass не установлен или пуст, то будет возвращён пустойDOMTokenList, то естьDOMTokenList со свойствомlength равным0.

Хотя само свойствоclassList доступно только для чтения, можно изменять связанный с нимDOMTokenList с помощью методовadd(),remove(),replace() иtoggle().

Для проверки, содержит ли элемент какой-либо класс можно использовать методclassList.contains().

Примеры

const div = document.createElement("div");div.className = "foo";// Начальное состояние: <div></div>console.log(div.outerHTML);// Используем classList API для удаления и добавления классовdiv.classList.remove("foo");div.classList.add("anotherclass");// <div></div>console.log(div.outerHTML);// Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавленdiv.classList.toggle("visible");// Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументомdiv.classList.toggle("visible", i < 10);// falseconsole.log(div.classList.contains("foo"));// Добавление или удаление нескольких классов сразуdiv.classList.add("foo", "bar", "baz");div.classList.remove("foo", "bar", "baz");// Добавление или удаление нескольких классов с использованием spread-синтаксисаconst cls = ["foo", "bar"];div.classList.add(...cls);div.classList.remove(...cls);// Замена класса "foo" классом "bar"div.classList.replace("foo", "bar");