Adicionar classe a <html> com Javascript?

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

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

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

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

9

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

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

— Tom Esterez
fonte

7

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

— ama2
fonte

-2

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

— Roos Bautista
fonte