Добавить класс в <html> с помощью Javascript?

87

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

javascript html Брэндон Лебедев
источник
это был один из вопросов, которые я задавал, когда только начинал. Я так и не нашел хорошего места, где бы это упоминалось. Рад видеть это здесь.
Pow-Ian
Просто любопытно - зачем тебе это делать?
Дэвид Хёрстер
@David Чтобы добавить резервную копию на случай, если Modernizr не загрузится. Modernizr добавляет класс js при загрузке.
Брэндон Лебедев
1
Вам действительно стоит добавить в разметку класс no-js, если вы используете modernizr. (Если modernizr загрузится, он удалит этот класс)
Кевин Баучер
@Kevin - Уже сделал. Перейти на шаблон HTML5 !
Брэндон Лебедев

Ответы:

110

Как это:

var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

root.setAttribute( 'class', 'myCssClass' );

Или используйте эту строку как строку setter, чтобы сохранить ранее примененные классы: (спасибо @ ama2)

root.className += ' myCssClass';

Или, в зависимости от требуемой поддержки браузера, вы можете использовать classList.add()метод:

root.classList.add('myCssClass');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList http://caniuse.com/#feat=classlist

ОБНОВИТЬ:

Более элегантным решением для ссылки на HTMLэлемент может быть следующее:

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//
Кевин Баучер
источник
FYI, classlist.add / .remove не работает с document.documentElement.
Энди Мерсер
@AndyMercer Это classList.add(дело верблюда).
Кевин Баучер
Да, очевидно, это была опечатка. Но то, что я сказал, все еще верно. classListне работает с document.documetElement.
Энди Мерсер
Я пробовал это в трех разных браузерах, прежде чем ответить, так что это не было «очевидной опечаткой». (Chrome, Firefox, Safari - root.classList.add('myCssClass')работали во всех трех.) Вы используете IE?
Кевин Баучер
document.documentElement.classList.addздесь вроде работает нормально. Браузеры в 2018 году начали это поддерживать?
Адриан
14

Это также должно работать:

document.documentElement.className = 'myClass';

Совместимость .

Редактировать:

IE 10 считает, что это только чтение; пока что:

Это сработало!?

Опера работает:

Работает

Я также могу подтвердить, что он работает в:

  • Хром 26
  • Firefox 19.02
  • Safari 5.1.7
c24w
источник
В вашем примере есть НЕВИДИМЫЕ СИМВОЛЫ, а именно U+200Bпосле последнего апострофа, что приводит к сбою компиляции в webpack и других компиляторах!
entozoon
@entozoon как странно! Спасибо что подметил это. Я починил сейчас :)
c24w
11

Я бы порекомендовал вам взглянуть на jQuery .

способ jQuery:

$("html").addClass("myClass");
Aebersold
источник
26
Вам не нужен jQuery для выбора элемента с помощью JavaScript.
Дэвид Хёрстер
1
jQuery действительно прост в освоении, и в наши дни он все равно используется большую часть времени. Но да, для этой задачи он вам не нужен;)
aebersold
1
да, верно, мы знаем, что такое jquery, но ответ на чисто javascript-вопрос с помощью «изучить jquery» - вот что меня удивило :)
povilasp
2
@aebersold Я согласен с тем, что jQuery легко изучить и использовать, но при загрузке 50 КБ (плюс дополнительный запрос) просто для добавления класса это немного излишне, ИМХО.
Дэвид Хёрстер
Смерть jQuery! Vanilla JS для победы!
Fresheyeball
7

Вы должны добавить класс, а не перезаписывать его 

var headCSS = document.getElementsByTagName("html")[0].getAttribute("class") || "";
document.getElementsByTagName("html")[0].setAttribute("class",headCSS +"foo");

Я бы по-прежнему рекомендовал использовать jQuery, чтобы избежать несовместимости с браузерами.

ama2
источник
-2

С помощью Jquery ... Вы можете добавить класс к элементам html следующим образом:

$(".divclass").find("p,h1,h2,h3,figure,span,a").addClass('nameclassorid');

nameclassorid без точки или # в начале

Роос Баутиста
источник