logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

Добавление класса к тегу <html> с помощью Javascript

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Если вам нужно добавить новый класс к тегу <html>, воспользуйтесь следующим фрагментом JavaScript кода:

JS
Скопировать код
document.documentElement.classList.add('new-class');

Данный код мгновенно обращается к корневому элементу <html> и добавляет к нему класс 'new-class', тем самым моментально давая доступ к необходимым CSS-стилям или JavaScript-функционалу.

className против classList

Старая школа: className

Есть традиционный, хотя и не самый изящный метод добавления классов с учетом уже существующих:

JS
Скопировать код
// Не идеален, но справляется со своей задачей!
document.documentElement.className += ' new-class';

Обязательно учтите пробел перед именем класса, чтобы не сформировать новый несуществующий класс вида .existingClassnew-class.

Косметический ремонт: classList

Любители современного JavaScript могут использовать classList. Это более изящный и безопасный способ работы с классами, который освободит вас от проблем с пробелами и дублированием:

JS
Скопировать код
// Теперь добавление класса — проще простого!
document.documentElement.classList.add('another-class');

Вы также можете добавить сразу несколько классов:

JS
Скопировать код
// Потому что одного мало!
document.documentElement.classList.add('first-class', 'second-class');

Решения для кроссбраузерности и устаревшие браузеры

Привет из прошлого: поддержка устаревших браузеров

Проверьте совместимость classList со своими браузерами, прежде чем его использовать. Вы можете воспользоваться ресурсами вроде caniuse.com. Если же ваша аудитория использует IE9, скорее всего, вам потребуется шим или полифилл.

Всеобъемлющий инструмент: jQuery

Даже если сегодня jQuery не на вершине популярности, он всё равно остаётся надёжным средством для обеспечения кроссбраузерности:

JS
Скопировать код
// "Мне могут отдать пальму первенства, но я всё равно крут!" – мог бы сказать jQuery
$("html").addClass("myClass");

Взаимодействие с другими скриптами

Внедрение и сопряжение с существующим кодом требует осторожности. Важно не нарушить работу других скриптов, особенно если они зависят от className для стилизации:

JS
Скопировать код
// "Ни один скрипт не пострадал при добавлении этого класса."

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

Представьте элемент <html> как коробку. Чтобы узнать, что в ней, мы хотим пометить её:

Markdown
Скопировать код
До 📦: Без маркировки

Воспользовавшись JavaScript, мы наносим маркировку:

JS
Скопировать код
document.documentElement.classList.add('fresh-apples');

И теперь на коробке есть ярлычок:

Markdown
Скопировать код
После 📦🍏: Отмечена как `.fresh-apples`

Таким образом, JavaScript украшает HTML так же, как ярлык помогает нам определить содержимое коробки.

Проверки и лучшие практики

Доступность — это приоритет :wheelchair:

Любые изменения в DOM, включая динамическое добавление классов, могут влиять на доступность. Убедитесь, что ваш сайт всё ещё удобен и доступен для пользователей, использующих вспомогательные технологии.

Поддерживайте чистоту и порядок

Инлайн-скрипты – это как фаст-фуд. Модульные функции в внешних файлах – подобно домашнему приготовлению пищи. Что выберете вы?

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

  1. Element: свойство classList – Web API | MDN
  2. Как добавить класс
  3. html – Как я могу изменить класс элемента с помощью JavaScript? – Stack Overflow
  4. Классы
  5. Как изменять атрибуты, классы и стили в DOM | DigitalOcean
  6. Document: метод querySelector() – Web API | MDN
  7. .addClass() | Документация API jQuery