Додати клас до <html> за допомогою Javascript?

87

Як додати клас до <html>кореневого елементу за допомогою Javascript?

javascript html

це було одне з питань, яке я задав, коли починав. Я ніколи не знайшов хорошого місця, яке б про це згадувало. Я радий бачити це тут.

— Pow-Ian

Просто цікаво - чому ви хочете це зробити?

— Девід Хоерстер,

@David Додавання резервної копії на випадок, якщо Modernizr не завантажується. Modernizr додає клас "js" при завантаженні.

— Брендон Лебедєв

1

Ви дійсно повинні додати клас "no-js" до своєї розмітки, якщо ви використовуєте modernizr. (Якщо modernizr завантажить, він видалить цей клас)

— Кевін Баучер,

@Kevin - Вже робив. Перейдіть на шаблон HTML5 !

— Брендон Лебедєв

109

Подобається це:

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.

— Andy Mercer

@AndyMercer Це classList.add(випадок верблюда).

— Кевін Баучер

Так, очевидно, це була помилка. Але те, що я сказав, все одно правильне. classListне працює на document.documetElement.

— Andy Mercer

Я спробував його у трьох різних браузерах, перш ніж відповісти, тому це не було "очевидно друкарською помилкою". (Chrome, Firefox, Safari - root.classList.add('myCssClass')працював у всіх трьох.) Чи використовуєте ви IE?

— Кевін Баучер,

document.documentElement.classList.addздається, тут чудово працює. Чи браузери в 2018 році почали підтримувати це?

— Адріан

14

Це також має спрацювати:

document.documentElement.className = 'myClass';

Сумісність .

Редагувати:

IE 10 вважає, що це лише для читання; ще:

Це спрацювало!?

Оперні твори:

Працює

Я також можу підтвердити, що це працює в:

Chrome 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-запитання "learn jquery" - це те, що мене здивувало :)

— povilasp

2

@aebersold Я згоден з тим, що jQuery легко вивчити та використовувати, але при завантаженні 50 КБ (плюс додатковий запит) просто для додавання класу це трохи перебільшує IMHO.

— Девід Хоерстер,

Смерть jQuery! Ванільний 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 немає точки або # на початку

— Рус Баутіста
джерело