Добавление и удаление CSS классов в JavaScript: руководство

Быстрый ответ

Вы можете использовать classList в JavaScript для контроля над классами:

// Добавляем классы:
document.querySelector('.my-element').classList.add('class1', 'class2');

// Удаляем классы:
document.querySelector('.my-element').classList.remove('class1', 'class2');

С помощью classList добавление и удаление классов осуществляется так же просто, как и замена персонажей в комиксе!

Методическое управление классами

Есть множество методов для работы с классами:

Навешивание нескольких классов сразу

let element = document.querySelector('.my-element');
element.classList.add(...['class3', 'class4', 'class5']); // Начинаем веселье!

Подробнее об этом расскажет наш спикер на видео

Удаление класса с проверкой

if (element.classList.contains('class2')) {  // Проверяем наличие класса перед его удалением.
  element.classList.remove('class2');
}

Прямое добавление классов

Если вам важна простота и прямота:

element.className += ' class6 class7';  // Помним о пробелах между названиями классов!

Метод для "динозавров"

Поддержка устаревших браузеров, например IE8:

element.className = element.className.replace(/\bclass7\b/g, "");  // Помощь "динозаврам".

При необходимости транспиляции современного кода в устаревший стандарт, можете использовать Babel.

Визуализация

Можем воспринимать HTML-элемент как модель на подиуме:

Изначальный образ: [👕, 👖]

Добавляем классы:

element.classList.add('🎩', '👞'); // Готовы к показу!

Новый образ: [👕, 👖, 🎩, 👞]

Удаляем классы:

element.classList.remove('👖'); // Адаптируемся под новые тренды.

Окончательный образ: [👕, 🎩, 👞]

С помощью classList вы в полном контроле над стилем!

Динамичность интерфейса с помощью классов

Динамическое управление классами создает неповторимый стиль и атмосферу на вашем сайте.

Добавлением слушателя событий

// При клике меняем класс, как будто переодеваемся в телефонной будке.
element.addEventListener('click', function() {
  this.classList.toggle('active');
});

Лаконичное добавление класса

element.className += ' new-class'; // Меняем стиль новым классом.

Метод setAttribute для старых браузеров

setAttribute все еще может пригодиться для работы со старыми версиями браузеров:

element.setAttribute('class', element.className + ' new-class'); // Старые методы всегда актуальны!

Чистота кода

Стремитесь к минимализму и лаконичности кода, используя чистый JavaScript для ускорения работы вашего скрипта.

Альтернативы и особенности управления классами

Различные способы управления классами имеют свои особенности и подходят для разных сценариев.

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

// Будем краткими и ясными!
element.setAttribute('class', 'class8 class9');

Клонирование элемента

В некоторых случаях может быть полезна стратегия клонирования:

let newElement = element.cloneNode(true);
newElement.className = 'class10 class11'; // Ваш обновленный элемент готов.
element.parentNode.replaceChild(newElement, element);

Возможные трудности

Будьте внимательны, чтобы случайно не удалить нужные классы и обязательно проверяйте совместимость вашего кода с различными браузерами. Не забывайте убедиться, что HTML-страница полностью загружена перед запуском скриптов.

Полезные материалы

1. Свойство classList элемента – Веб-API | MDN — подробное руководство по использованию classList.
2. Как переключаться между именами классов – W3Schools — примеры переключения классов.
3. html – Как я могу изменить класс элемента с помощью JavaScript? – Stack Overflow — советы опытных разработчиков.
4. Основы DOM-манипуляций в чистом JavaScript (без jQuery) — SitePoint — качественное объяснение работы с классами.
5. Свойство classList DOM-элемента – W3Schools — полный справочник по свойству classList.
6. Введение в события – Изучение веб-разработки | MDN — детальная информация о работе с событиями в JavaScript.