HTML DOM Element classList атрибут

Определение и использование

classList Атрибут возвращает CSS-классы элемента.

classList Атрибут возвращает DOMTokenList.

Пример

Пример 1

Добавление класса "myStyle" к элементу:

const list = element.classList;
list.add("myStyle");

Попробуйте сами

Пример 2

Удаление класса "myStyle" из элемента:

const list = element.classList;
list.remove("myStyle");

Попробуйте сами

Пример 3

Переключение включения/отключения "myStyle":

const list = element.classList;
list.toggle("myStyle");

Попробуйте сами

Совет:Более примеров предоставлено внизу страницы.

Грамматика

element.classList

Возвратное значение

Тип Описание
Объект DOMTokenList. Список классов элемента.

Примечание:PERTY classList является только чтением, но вы можете использовать следующие методы для добавления, переключения или удаления CSS-классов из списка:

classList属性 и методы

Название Описание
add() Добавляет один или несколько токенов в список.
contains() Возвращает true, если список содержит классы.
entries() Возвращает итератор с ключами/значениями из списка.
forEach() Выполните回调-функцию для каждого токена в списке.
item() Возврат токена по заданному индексу.
keys() Возврат итератора с ключами из списка.
length Возврат количества токенов в списке.
remove() Удалите один или несколько токенов из списка.
replace() Замените токен в списке.
supports() Возврат true, если токен поддерживается свойством.
toggle() Переключение между токенами в списке.
value Возврат списка токенов в виде строки.
values() Возврат итератора с значениями из списка.

Более сложные примеры

Пример 4

Добавьте несколько классов к элементу:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Попробуйте сами

Пример 5

Удалите несколько классов из элемента:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Попробуйте сами

Пример 6

Сколько классов у элемента?

let numb = element.classList.length;

Попробуйте сами

Пример 7

Получите имя класса элемента "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Попробуйте сами

Пример 8

Получите первый класс элемента:

let className = element.classList.item(0);

Попробуйте сами

Пример 9

Имеет ли элемент класс "myStyle"?

let x = element.classList.contains("myStyle");

Попробуйте сами

Пример 10

Если у элемента есть класс "myStyle", удалите "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Попробуйте сами

Пример 11

Переключение между классами для создания выпадающей кнопки:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Попробуйте сами

Пример 12

Созданиеsticky导航нойпанели:

// Получить навигационную панель
const navbar = document.getElementById("navbar");
// Получить положение навигационной панели
const sticky = navbar.offsetTop;
// Добавить класс sticky к навигационной панели, когда вы достигаете места прокрутки
// Удалить его, когда вы выходите из места прокрутки
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Попробуйте сами

Поддержка браузеров

Все браузеры поддерживают element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Уроки CSS:Грамматика CSS

Руководство по CSS:Выборщик CSS .class

Объект DOMTokenList

Свойство className

Метод getElementsByClassName()

Объект Style в HTML DOM