Adicionar classe a <html> com Javascript?

Question 1

Como você adiciona uma classe ao <html>elemento raiz usando Javascript?

Question 2

Como isso:

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

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

Ou use isso como sua linha 'setter' para preservar quaisquer classes aplicadas anteriormente: (obrigado @ ama2)

root.className += ' myCssClass';

Ou, dependendo do suporte do navegador necessário, você pode usar o classList.add()método:

root.classList.add('myCssClass');

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

ATUALIZAR:

Uma solução mais elegante para referenciar o HTMLelemento pode ser esta:

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

Question 3

Isso também deve funcionar:

document.documentElement.className = 'myClass';

Compatibilidade .

Editar:

O IE 10 considera que é somente leitura; ainda:

Funcionou!?

Opera funciona:

Trabalho

Também posso confirmar que funciona em:

Chrome 26
Firefox 19.02
Safari 5.1.7

Question 4

Eu recomendo que você dê uma olhada no jQuery .

maneira jQuery:

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

Question 5

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

classListé compatível desde o ie10: https://caniuse.com/#search=classlist

Question 6

Você deve anexar a classe, não sobrescrevê-la

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

Eu ainda recomendaria usar jQuery para evitar incompatibilidades de navegador

Question 7

Com Jquery ... Você pode adicionar classes a elementos html como este:

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

nameclassorid nenhum ponto ou # no início

Answer 1

87

Como você adiciona uma classe ao <html>elemento raiz usando Javascript?

javascript html Brandon Lebedev
fonte

esta foi uma das perguntas que fiz quando comecei. Nunca encontrei um bom lugar que mencionasse isso. Estou feliz em ver isso aqui.

Pow-Ian de

Apenas curiosidade - por que você deseja fazer isso?

David Hoerster

@David Para adicionar um fallback no caso de Modernizr não carregar. Modernizr adiciona a classe "js" ao carregar.

Brandon Lebedev

1

Você realmente deve adicionar a classe "no-js" à sua marcação se estiver usando o modernizr. (Se o modernizr carregar, ele removerá essa classe)

Kevin Boucher

@Kevin - Já fiz. Go HTML5 Boilerplate !

Brandon Lebedev

Answer 2

esta foi uma das perguntas que fiz quando comecei. Nunca encontrei um bom lugar que mencionasse isso. Estou feliz em ver isso aqui.

Pow-Ian de

Answer 3

Apenas curiosidade - por que você deseja fazer isso?

David Hoerster

Answer 4

@David Para adicionar um fallback no caso de Modernizr não carregar. Modernizr adiciona a classe "js" ao carregar.

Brandon Lebedev

Answer 5

1

Você realmente deve adicionar a classe "no-js" à sua marcação se estiver usando o modernizr. (Se o modernizr carregar, ele removerá essa classe)

Kevin Boucher

Answer 6

@Kevin - Já fiz. Go HTML5 Boilerplate !

Brandon Lebedev

Answer 7

110

Como isso:

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

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

Ou use isso como sua linha 'setter' para preservar quaisquer classes aplicadas anteriormente: (obrigado @ ama2)

root.className += ' myCssClass';

Ou, dependendo do suporte do navegador necessário, você pode usar o classList.add()método:

root.classList.add('myCssClass');

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

ATUALIZAR:

Uma solução mais elegante para referenciar o HTMLelemento pode ser esta:

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

Kevin Boucher
fonte

Para sua informação, classlist.add / .remove não funciona em document.documentElement.

Andy Mercer

@AndyMercer É classList.add(caixa de camelo).

Kevin Boucher

Sim, obviamente isso foi um erro de digitação. Mas o que eu disse ainda está correto. classListnão funciona em document.documetElement.

Andy Mercer

Tentei em três navegadores diferentes antes de responder, então não foi "obviamente um erro de digitação". (Chrome, Firefox, Safari- root.classList.add('myCssClass')funcionou em todos os três.) Você está usando o IE?

Kevin Boucher

document.documentElement.classList.addparece funcionar bem aqui. Os navegadores em 2018 começaram a oferecer suporte a isso?

Adrian

Answer 8

Para sua informação, classlist.add / .remove não funciona em document.documentElement.

Andy Mercer

Answer 9

@AndyMercer É classList.add(caixa de camelo).

Kevin Boucher

Answer 10

Sim, obviamente isso foi um erro de digitação. Mas o que eu disse ainda está correto. classListnão funciona em document.documetElement.

Andy Mercer

Answer 11

Tentei em três navegadores diferentes antes de responder, então não foi "obviamente um erro de digitação". (Chrome, Firefox, Safari- root.classList.add('myCssClass')funcionou em todos os três.) Você está usando o IE?

Kevin Boucher

Answer 12

document.documentElement.classList.addparece funcionar bem aqui. Os navegadores em 2018 começaram a oferecer suporte a isso?

Adrian

Answer 13

14

Isso também deve funcionar:

document.documentElement.className = 'myClass';

Compatibilidade .

Editar:

O IE 10 considera que é somente leitura; ainda:

Funcionou!?

Opera funciona:

Trabalho

Também posso confirmar que funciona em:

Chrome 26
Firefox 19.02
Safari 5.1.7

c24w
fonte

Seu exemplo tem CARACTERES INVISÍVEIS, principalmente U+200Bapós o apóstrofo final, fazendo com que ele falhe na compilação no webpack e em outros compiladores!

entozoon de

@entozoon que estranho! Obrigado por apontar isso. Eu

consertei

Answer 14

Seu exemplo tem CARACTERES INVISÍVEIS, principalmente U+200Bapós o apóstrofo final, fazendo com que ele falhe na compilação no webpack e em outros compiladores!

entozoon de

Answer 15

@entozoon que estranho! Obrigado por apontar isso. Eu

consertei

Answer 16

11

Eu recomendo que você dê uma olhada no jQuery .

maneira jQuery:

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

aebersold
fonte

26

Você não precisa do jQuery para selecionar um elemento com JavaScript.

David Hoerster

1

O jQuery é realmente fácil de aprender e é usado na maioria das vezes, atualmente. Mas sim, você não precisa dele para esta tarefa;)

aebersold

1

sim, certo, sabemos o que é jquery, mas responder a uma pergunta puramente javascript com "aprender jquery" é o que me surpreendeu :)

povilasp

2

@aebersold Eu concordo que jQuery é fácil de aprender e usar, mas com 50K para baixar (mais um pedido adicional) apenas para adicionar uma classe, é um pouco exagero IMHO.

David Hoerster

Morte ao jQuery! Vanilla JS para a vitória!

Fresheyeball

Answer 17

26

Você não precisa do jQuery para selecionar um elemento com JavaScript.

David Hoerster

Answer 18

1

O jQuery é realmente fácil de aprender e é usado na maioria das vezes, atualmente. Mas sim, você não precisa dele para esta tarefa;)

aebersold

Answer 19

1

sim, certo, sabemos o que é jquery, mas responder a uma pergunta puramente javascript com "aprender jquery" é o que me surpreendeu :)

povilasp

Answer 20

2

@aebersold Eu concordo que jQuery é fácil de aprender e usar, mas com 50K para baixar (mais um pedido adicional) apenas para adicionar uma classe, é um pouco exagero IMHO.

David Hoerster

Answer 21

Morte ao jQuery! Vanilla JS para a vitória!

Fresheyeball

Answer 22

9

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

classListé compatível desde o ie10: https://caniuse.com/#search=classlist

Tom Esterez
fonte

Answer 23

Você deve anexar a classe, não sobrescrevê-la

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

Eu ainda recomendaria usar jQuery para evitar incompatibilidades de navegador

Answer 24

Com Jquery ... Você pode adicionar classes a elementos html como este:

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

nameclassorid nenhum ponto ou # no início

Adicionar classe a <html> com Javascript?

Respostas: