Добавить класс в <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

9

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

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

— Том Эстерез
источник

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 без точки или # в начале

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