JavaScript свойство Element.classList

Определение и применение

JavaScript свойство classList объекта Element является свойством только для чтения, которое возвращает живую коллекцию DOMTokenList, содержащую значение глобального атрибута class (классы элемента).

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2017 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.classList
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`classList`	✓22	✓16	✓3.6	✓11.5	✓7	✓25	✓4	✓11.5	✓7	✓1.5	✓4.4	✓7

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const elementClassList = element.classList;

Если глобальный атрибут class не был установлен или является пустым, то elementClassList.length возвращает значение 0.

Спецификация

DOM Standard.

Методы объекта DOMTokenList

Возвращаемый свойством classList объект DOMTokenList имеет следующие методы:

Синтаксис метода Описание — Element.classList
Синтаксис метода	Описание
`add(token)` `add(token1, token2, ...tokenN)`	Добавляет указанные значения класса. Если указанные классы уже существуют в атрибуте `class` элемента, то они игнорируются.
`remove(token)` `remove(token1, token2, ...tokenN)`	Удаляет указанные значения класса. Удаление класса, который не существует, не вызывает ошибки.
`item(index)`	Возвращает значение класса по индексу в коллекции. Результат аналогичен вызову `classList[index]`.
`toggle(token)` `toggle(token, force)`	Когда присутствует только один аргумент, переключает значение класса: если класс существует, то удаляет его и возвращает `false`, если нет, то добавляет его и возвращает `true`. Если второй аргумент имеет значение `true`, то указанное значение класса будет добавлено, а если значение `false`, — удалено; метод возвращает итоговое наличие класса.
`contains(token)`	Проверяет, существует ли указанное значение класса в атрибуте `class` элемента. Возвращает логическое значение.
`replace(oldToken, newToken)`	Производит замену существующего класса новым классом. Возвращает `true`, если заменяемый класс существовал.

Остальные члены DOMTokenList

Дополнительные члены DOMTokenList
Член экземпляра	Назначение
`length`	Число токенов, только чтение.
`value`	Строка значения атрибута; допускает чтение и запись.
`entries()`	Возвращает итератор пар [индекс, токен].
`keys()`	Возвращает итератор числовых индексов.
`values(), Symbol.iterator`	Возвращают итератор строковых токенов; позволяют использовать `for...of`.
`forEach()`	Вызывает функцию обратного вызова для каждого токена; возвращает `undefined`.
`supports()`	Проверяет поддерживаемый токен у списков с определённым набором допустимых значений. У `classList` такого набора нет: вызов бросает `TypeError`.
`toString()`	Возвращает строку значения списка токенов.

У item(index) результат вне диапазона равен null, а при доступе list[index] — undefined. replace() возвращает логическое значение: существовал ли заменяемый токен. Пустой токен у операций изменения вызывает SyntaxError, токен с ASCII-пробелом — InvalidCharacterError.

Пример использования

Добавление и переключение класса

Нажмите ▶: после add() в консоли появится строка классов note active, а после toggle() и contains() — false, потому что класс active снова удалён.

index.html

HTML

<p id="message" class="note">Текст примера</p>

main.js

JavaScript

const element = document.getElementById('message')
element.classList.add('active')
console.log(element.className)
element.classList.toggle('active')
console.log(element.classList.contains('active'))

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}