Получить профессию в Skypro
Добавление класса к тегу <html> с помощью Javascript
Быстрый ответ
Если вам нужно добавить новый класс к тегу <html>, воспользуйтесь следующим фрагментом JavaScript кода:
document.documentElement.classList.add('new-class');Данный код мгновенно обращается к корневому элементу <html> и добавляет к нему класс 'new-class', тем самым моментально давая доступ к необходимым CSS-стилям или JavaScript-функционалу.
className против classList
Старая школа: className
Есть традиционный, хотя и не самый изящный метод добавления классов с учетом уже существующих:
// Не идеален, но справляется со своей задачей!
document.documentElement.className += ' new-class';Обязательно учтите пробел перед именем класса, чтобы не сформировать новый несуществующий класс вида .existingClassnew-class.
Косметический ремонт: classList
Любители современного JavaScript могут использовать classList. Это более изящный и безопасный способ работы с классами, который освободит вас от проблем с пробелами и дублированием:
// Теперь добавление класса — проще простого!
document.documentElement.classList.add('another-class');Вы также можете добавить сразу несколько классов:
// Потому что одного мало!
document.documentElement.classList.add('first-class', 'second-class');Решения для кроссбраузерности и устаревшие браузеры
Привет из прошлого: поддержка устаревших браузеров
Проверьте совместимость classList со своими браузерами, прежде чем его использовать. Вы можете воспользоваться ресурсами вроде caniuse.com. Если же ваша аудитория использует IE9, скорее всего, вам потребуется шим или полифилл.
Всеобъемлющий инструмент: jQuery
Даже если сегодня jQuery не на вершине популярности, он всё равно остаётся надёжным средством для обеспечения кроссбраузерности:
// "Мне могут отдать пальму первенства, но я всё равно крут!" – мог бы сказать jQuery
$("html").addClass("myClass");Взаимодействие с другими скриптами
Внедрение и сопряжение с существующим кодом требует осторожности. Важно не нарушить работу других скриптов, особенно если они зависят от className для стилизации:
// "Ни один скрипт не пострадал при добавлении этого класса."Визуализация
Представьте элемент <html> как коробку. Чтобы узнать, что в ней, мы хотим пометить её:
До 📦: Без маркировкиВоспользовавшись JavaScript, мы наносим маркировку:
document.documentElement.classList.add('fresh-apples');И теперь на коробке есть ярлычок:
После 📦🍏: Отмечена как `.fresh-apples`Таким образом, JavaScript украшает HTML так же, как ярлык помогает нам определить содержимое коробки.
Проверки и лучшие практики
Доступность — это приоритет :wheelchair:
Любые изменения в DOM, включая динамическое добавление классов, могут влиять на доступность. Убедитесь, что ваш сайт всё ещё удобен и доступен для пользователей, использующих вспомогательные технологии.
Поддерживайте чистоту и порядок
Инлайн-скрипты – это как фаст-фуд. Модульные функции в внешних файлах – подобно домашнему приготовлению пищи. Что выберете вы?