Элемент: свойство classList
Базовая реализация Широко поддерживается
Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она поддерживается браузерами с июля 2015 года.
Свойство Element.classList — это свойство только для чтения, которое возвращает живую коллекцию DOMTokenList атрибутов класса элемента. Это можно использовать для управления списком классов.
Использование classList — удобная альтернатива доступу к списку классов элемента как к строке, разделенной пробелами, через element.className.
Значение
DOMTokenList представляющая содержимое атрибута класса элемента. Если атрибут класса не задан или пустой, возвращается пустая DOMTokenList, т.е. DOMTokenList со свойством length равным 0.
Хотя само свойство classList является только для чтения, вы можете изменять связанные с ним DOMTokenList с помощью методов add(), remove(), replace() и toggle().
Вы можете проверить, содержит ли элемент заданный класс, используя метод classList.contains().
Примеры
const div = document.createElement("div");
div.className = "foo";
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("another-class");
// <div class="another-class"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);
// false
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
Спецификации
| Спецификация |
|---|
| DOM # ref-for-dom-element-classlist① |
Совместимость браузеров
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
classList |
228–22Не поддерживается для SVG-элементов. |
1612–16Не поддерживается для SVG-элементов. |
3.6 | 11.5 | 76–7Не поддерживается для SVG-элементов. |
2518–25Не поддерживается для SVG-элементов. |
4 | 11.5 | 76–7Не поддерживается для SVG-элементов. |
1.51.0–1.5Не поддерживается для SVG-элементов. |
4.43–4.4Не поддерживается для SVG-элементов. |
См. также
element.classNameDOMTokenList-
classList.js(поперечно-браузерный JavaScript-полифилл, полностью реализующийelement.classList)
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList