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 July 2015.

Описание

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

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