LearnJS

classList: работа с CSS-классами в JavaScript

У одного DOM-элемента может быть несколько CSS-классов. Свойство classList позволяет работать с каждым из них отдельно: добавлять, удалять, проверять и переключать. Остальные классы элемента при этом сохраняются.

Свойство classList

Классы хранятся в атрибуте class через пробел. Например, у кнопки ниже есть базовый класс favorite-button и класс оформления button.

<button class="favorite-button button">В избранное</button>

Через classList можно изменить только нужный класс, не перезаписывая остальные.

Добавление класса

Метод classList.add() добавляет класс элементу. CSS-правило по этому классу изменяет его внешний вид.

.favorite-button.is-active {
  color: #fff;
  background-color: #2f855a;
}
const favoriteButton = document.querySelector('.favorite-button');

favoriteButton.classList.add('is-active');

Кнопка получит класс is-active, а CSS-правило изменит её внешний вид.

Имя класса передают без точки: classList.add(‘is-active’), а не classList.add(‘.is-active’). В add() и remove() можно передать несколько имён отдельными аргументами: classList.add(‘is-active’, ‘is-ready’).

Проверка класса

Метод classList.contains() проверяет, есть ли у элемента класс, и возвращает true или false.

if (favoriteButton.classList.contains('is-active')) {
  console.log('Кнопка уже в активном состоянии');
}

Проверка нужна, когда дальнейшее действие зависит от текущего состояния элемента.

Удаление класса

Чтобы убрать класс, используют classList.remove().

favoriteButton.classList.remove('is-active');

Базовые классы favorite-button и button останутся у кнопки. Если удаляемого класса уже нет, ошибки не будет.

Переключение класса

favoriteButton.classList.toggle('is-active');

Метод classList.toggle() меняет наличие класса: если класса нет, он будет добавлен; если есть - удалён. Такой вариант удобен для повторяющегося действия: открыть и закрыть меню, показать и скрыть блок, добавить и убрать элемент из избранного.

classList и className

Не путайте classList со свойством className. Присваивание в className заменяет всю строку классов элемента.

favoriteButton.className = 'is-active';

После этого у кнопки не останется классов favorite-button и button. Для точечного изменения класса используйте classList.

Когда использовать classList

classList подходит для состояния интерфейса: меню открыто, кнопка активна, поле содержит ошибку. С одним классом можно связать несколько CSS-правил и CSS-переход.

Для одного вычисленного CSS-значения, например ширины индикатора прогресса, обычно используют style. Постоянное оформление оставляют в CSS без JavaScript.

Итого

Свойство classList помогает управлять отдельными CSS-классами без потери остальных. add() добавляет класс, remove() удаляет, contains() проверяет, а toggle() переключает его состояние.