Element: свойство classList

Описание

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

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

Значение

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

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

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

Примеры

js
const div = document.createElement("div");
div.className = "foo";

// Начальное состояние: <div class="foo"></div>
console.log(div.outerHTML);

// Используем classList API для удаления и добавления классов
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавлен
div.classList.toggle("visible");

// Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументом
div.classList.toggle("visible", i < 10);

// false
console.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");

Спецификации

Specification
DOM Standard
# ref-for-dom-element-classlist①

Совместимость с браузерами

BCD tables only load in the browser

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