JavaScript · DOM

classList: управляем CSS-классами

classList позволяет добавлять, удалять и переключать отдельные классы элемента. Остальные классы сохраняются, поэтому этот способ безопаснее, чем полная перезапись className.

Как получить элемент

Сначала найди элемент через querySelector(). После этого у него станет доступно свойство classList.

const menu = document.querySelector('.menu');

menu.classList.add('menu--open');

В add() передаётся имя класса без точки. Точка нужна в CSS-селекторе, но не в самом названии класса.

Основные методы

• add('active') — добавить класс.
• remove('active') — удалить класс.
• toggle('active') — добавить отсутствующий класс или удалить существующий.
• contains('active') — проверить наличие класса.
• replace('old', 'new') — заменить один класс другим.

card.classList.add('card--selected');
card.classList.remove('card--loading');

if (card.classList.contains('card--selected')) {
  console.log('Карточка выбрана');
}

Открываем меню по клику

Метод toggle() особенно удобен для кнопок, выпадающих блоков и мобильной навигации.

const button = document.querySelector('.menu-button');
const menu = document.querySelector('.menu');

button.addEventListener('click', () => {
  const isOpen = menu.classList.toggle('menu--open');
  button.setAttribute('aria-expanded', String(isOpen));
});

toggle() возвращает итоговое состояние класса. Благодаря этому значение aria-expanded остаётся синхронизировано с видимостью меню.

Явное состояние toggle

Второй аргумент полезен, когда состояние уже известно. При true класс будет добавлен, при false — удалён.

const hasError = email.value === '';
field.classList.toggle('field--error', hasError);

Частые ошибки

• Передавать '.active' вместо 'active'.
• Вызывать classList у null, когда элемент не найден.
• Менять только оформление и забывать про доступные атрибуты вроде aria-expanded.

Связанные темы

Повтори querySelector(), затем изучи addEventListener() и состояния элементов в CSS.