Свойство classList
Пример element.classList
Добавьте класс к элементу "myStyle"
const list = element.classList;
list.add("myStyle");
Попробуйте сами »
Удалите класс из элемента "myStyle":
const list = element.classList;
list.remove("myStyle");
Попробуйте сами »
Включение и выключение "myStyle":
const list = element.classList;
list.toggle("myStyle");
Попробуйте сами »
Ещё примеры ниже.
Описание classList
Свойство classList возвращает имена классов CSS элемента.
Свойство classList возвращаетDOMTokenList.
Похожи на classList
Синтаксис classList
element.classList
Возвращаемое значение classList
| Тип | Описание |
|---|---|
| Object | Объект DOMTokenList. Список имен классов элемента. |
Примечание classList
Свойство classList доступно только для чтения, но вы можете использовать перечисленные ниже методы для добавления, переключения или удаления классов CSS из списка:
Свойства и методы classList
| Свойство | Описание |
|---|---|
| add() | Добавляет один или несколько токенов в список |
| contains() | Возвращает true, если список содержит класс |
| entries() | Возвращает итератор с парами ключ/значение из списка |
| forEach() | Выполняет функцию обратного вызова для каждого токена в списке |
| item() | Возвращает токен по указанному индексу |
| keys() | Возвращает итератор с ключами в списке |
| length | Возвращает количество токенов в списке |
| remove() | Удаляет один или несколько токенов из списка |
| replace() | Заменяет токен в списке |
| supports() | Возвращает true, если токен является одним из поддерживаемых атрибутом токенов |
| toggle() | Переключает между токенами в списке |
| value | Возвращает список токенов в виде строки |
| values() | Возвращает итератор со значениями в списке |
Ещё примеры classList
Добавьте несколько классов к элементу:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Попробуйте сами »
Удалите несколько классов из элемента:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Попробуйте сами »
Получите имена классов элемента "myDIV":
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Попробуйте сами »
Есть ли у элемента класс "myStyle"?
let x = element.classList.contains("myStyle");
Попробуйте сами »
Удалите "anotherClass", если у элемента есть класс "myStyle".
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Попробуйте сами »
Переключение между классами для создания кнопки раскрывающегося списка:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Попробуйте сами »
Создайте липкую панель навигации:
// Получите панель навигации
const navbar = document.getElementById("navbar");
//
Получите смещение панели навигации
const sticky = navbar.offsetTop;
// Добавьте прикрепить класс к навигационной панели при достижении ее позиции прокрутки
// Удалить его при выходе из позиции прокрутки
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Попробуйте сами »
Поддержка браузера classList
element.classList поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Да | 10-11 | Да | Да | Да | Да |