Как добавить класс к корневому элементу html с помощью Javascript?

Добавление класса ‘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
  • Меньше кода
  • Лучшая производительность

Автор

Evgeni

На этом сайте делюсь заметками для начинающих по работе в macOS и Windows, а также по веб-разработке на WordPress. Надеюсь увидеть вас в числе своих подписчиков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *