Работа с классами: classList.add/remove/toggle/contains

Введение в classList: Магия работы с классами 🎩✨

Каждый элемент DOM — как актёр на сцене, а CSS-классы — его костюмы. Хотите быстро переодеть элемент или проверить, во что он уже одет? classList — ваш верный помощник!

Этот объект предоставляет удобные методы для управления классами элемента без танцев с регулярками или className. Давайте разберёмся, как им пользоваться.

Основные методы classList 🛠️

Работать с classList просто — у него есть 4 ключевых метода:

const element = document.querySelector('.my-element');

// Добавить класс
element.classList.add('new-class');

// Удалить класс
element.classList.remove('old-class');

// Переключить класс (есть — удалит, нет — добавит)
element.classList.toggle('active');

// Проверить наличие класса
const hasClass = element.classList.contains('hidden');

Добавляем классы: add() ➕

Метод add() позволяет добавить один или несколько классов элементу:

const button = document.getElementById('myButton');

// Добавляем один класс
button.classList.add('btn-primary');

// Добавляем несколько классов (через запятые)
button.classList.add('btn-lg', 'animated', 'pulse');

Особенности:

• Если класс уже есть — ничего не произойдёт (без ошибок)
• Поддерживает несколько аргументов
• Не добавляет лишних пробелов

Удаляем классы: remove() ➖

Противоположность add() — аккуратно удаляет указанные классы:

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

// Удаляем один класс
card.classList.remove('hidden');

// Удаляем несколько классов
card.classList.remove('old-theme', 'outdated-style');

Лайфхак: Хотите удалить все классы? Используйте element.className = '', но осторожно — это сбросит все классы разом!

Переключатель классов: toggle() 🔄

Самый «магический» метод! Работает как выключатель:

const menu = document.getElementById('dropdownMenu');

// Переключаем класс
menu.classList.toggle('show');

// С дополнительным условием (добавить только если force = true)
menu.classList.toggle('visible', window.innerWidth > 768);

Как работает:

• Если класса нет — добавляет
• Если класс есть — удаляет
• Второй аргумент (force) превращает toggle в add/remove:
• toggle('class', true) → add('class')
• toggle('class', false) → remove('class')

Проверка классов: contains() 🔍

«Детектив» среди методов — проверяет наличие класса:

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

if (modal.classList.contains('fade-in')) {
  console.log('Модальное окно появляется с анимацией!');
}

Важно: Возвращает true/false, поэтому идеально подходит для условий.

Реальный пример: Анимация кнопки

Давайте создадим кнопку, которая реагирует на нажатие:

<button id="actionBtn" class="btn">Нажми меня!</button>

const btn = document.getElementById('actionBtn');

btn.addEventListener('click', () => {
  // Добавляем анимацию
  btn.classList.add('pulse-animation');

  // Проверяем, активна ли кнопка
  if (!btn.classList.contains('disabled')) {
    // Переключаем состояние
    btn.classList.toggle('active');

    // Через 2 секунды убираем анимацию
    setTimeout(() => {
      btn.classList.remove('pulse-animation');
    }, 2000);
  }
});

Советы профессионала 💼

1. Цепочка методов: Методы classList можно объединять в цепочки: javascript element.classList.remove('old').add('new').toggle('active');

2. Делегирование событий: При работе с динамическими элементами проверяйте классы у цели события: javascript document.addEventListener('click', (e) => { if (e.target.classList.contains('delete-btn')) { e.target.classList.add('deleting'); } });

3. CSS-переходы: Добавляйте/удаляйте классы для запуска CSS-анимаций: css .box { transition: all 0.3s ease; } .box.expanded { transform: scale(1.2); }

Итоги: Когда что использовать

Теперь вы вооружены мощными инструментами для работы с классами! Практикуйтесь, экспериментируйте и создавайте динамичные интерфейсы с лёгкостью.