Добавление и удаление классов в JavaScript без jQuery

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

Если вам нужно переключать классы, используйте API classList:

Добавить класс:

element.classList.add("class-to-add");

Удалить класс:

element.classList.remove("class-to-remove");

Такой API предоставляет эффективное управление классами элементов DOM, что позволяет отказаться от использования jQuery.

Адаптация браузеров: Изменения времени

classList является неотъемлемой частью современных браузеров, но могут возникнуть проблемы со старыми браузерами, такими как IE8, которые не поддерживают classList. В таких случаях стоит прибегнуть к возможностям JavaScript.

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

var element = document.getElementById("div1");
if (element.className.indexOf("classToBeAdded") === -1) {
    element.className += " classToBeAdded";
}

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

var element = document.getElementById("div1");
element.className = element.className.replace(/classToBeRemoved/g, "");

Для поддержки старых браузеров стоит использовать полифиллы classList.

Мир переключений

Совершенствуйте переключение классов с classList.toggle, используя условные выражения:

Переключение:

element.classList.toggle("class-to-toggle", condition);

Здесь condition играет роль контролера: если true, то класс добавляется, а если false, то удаляется.

Безопасность прежде всего

Будьте особенно внимательны при работе с именами классов, получаемыми от пользователя, чтобы избежать атак через CSS-инъекции.

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

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

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

Примем в качестве примера гардероб, чтобы наглядно показать процесс добавления и удаления классов:

Гардероб (🚪) до:
Список классов: ["джинсы", "футболка"]

Добавление класса подобно появлению новой шляпы:

element.classList.add("hat");

Гардероб (🚪) после добавления:
Список классов: ["джинсы", "футболка", "шляпа"]

Удаление класса аналогично избавлению от старого шарфа:

element.classList.remove("scarf");

Гардероб (🚪) после удаления:
Список классов: ["джинсы", "футболка", "шляпа"]

Управление классами столь же просто, как выбор одежды из шкафа!

Исследование небанальных способов

classList может использоваться по-разному, например, в паре с className:

Установить классы:

element.className = "class1 class2 class3";

Проверить наличие класса:

if (element.className.split(' ').includes("classToCheck")) {
    // Класс на месте, можно радоваться!
}

Хотя свойства className могут выглядеть менее привлекательно, они предоставляют основные функции работы с классами без необходимости подключения внешних библиотек.

Советы и подведённые камни

Чтобы ваше путешествие в мир классов было спокойным, учтите несколько рекомендаций и возможных подводных камней:

Несколько классов: classList позволяет управлять сразу несколькими классами:

element.classList.add("class-one", "class-two");
element.classList.remove("class-three", "class-four");

Подводный камень №1 – Непредвиденный пробел: Будьте внимательны, чтобы не вставить случайно дополнительные пробелы в названиях классов, поскольку это может привести к неожиданным проблемам.

Подводный камень №2 – Уникальность классов: JavaScript не будет против, если встретит несколько идентичных имен классов, однако для избегания проблем со стилями стоит следить за их уникальностью.

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

1. Element: classList property – Web APIs | MDN — Официальная документация по работе с классами в документации MDN.
2. HTML DOM Element classList Property — Обзор classList с практическими примерами.
3. html – Как можно изменить класс элемента с помощью JavaScript? – Stack Overflow — Лучшие ответы на Stack Overflow по вопросу редактирования классов.
4. Быстрый совет: Как добавить или удалить CSS-класс с помощью чистого JavaScript — SitePoint — Пошаговое руководство по управлению классами на чистом JavaScript.
5. html – Как удалить CSS-класс у элемента с помощью JavaScript (без jQuery) – Stack Overflow — Обсуждение способов удаления классов без подключения дополнительных библиотек.
6. Базовый синтаксис класса — Освоение работы с class в JavaScript начинается с изучения classList.