Element: свойство classList
Описание
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 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
Смотрите также
element.className
DOMTokenList
classList.js
(кросс-браузерный полифил, реализующий функциональностьelement.classList
)