Добавление класса ‘js’ к корневому HTML-элементу обычно используется для того чтобы убедиться в поддержки JavaScript (чтобы можно было менять стили и поведение элементов в зависимости от поддержки JS)
Чистый JavaScript (ES6+):
document.documentElement.classList.add('js');
Vanilla JavaScript (более старый синтаксис):
document.documentElement.className += ' js';
С проверкой поддержки classList:
if (document.documentElement.classList) {
document.documentElement.classList.add('js');
}
Универсальный вариант, который:
- Проверяет поддержку classList
- Если поддерживает — использует classList.add()
- Если не поддерживает — использует старый метод конкатенации className
- Добавляет пробел перед ‘js’, только если className уже не пустой
if ('classList' in document.documentElement) {
document.documentElement.classList.add('js');
} else {
document.documentElement.className += (document.documentElement.className ? ' ' : '') + 'js';
}
Эти варианты полностью заменяют jQuery-версию и добавляют класс ‘js’ к корневому HTML-элементу, что обычно используется для индикации поддержки JavaScript в браузере.
Альтернативный вариант, который дополнительно удаляет класс ‘no-js’, если он был установлен заранее.
document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/, '') + ' js';
Основные преимущества:
- Не требуется подключение jQuery
- Нативный JavaScript
- Меньше кода
- Лучшая производительность