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

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

Ответ 1

Вот так:

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

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

Или используйте это как строку 'setter' для сохранения ранее примененных классов: (thanks @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

UPDATE:

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

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//

Ответ 2

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

document.documentElement.className = 'myClass';

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

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

IE 10 считает это только для чтения; еще:

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

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

Chrome 26
Firefox 19.02
Safari 5.1.7

Ответ 3

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

jQuery:

$("html").addClass("myClass");

Ответ 4

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

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

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

Ответ 5

document.documentElement.classList.add('myCssClass');

classList поддерживается начиная с 10: https://caniuse.com/#search=classlist

Ответ 6

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

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

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