¿Agregar clase a <html> con Javascript?

87

¿Cómo se agrega una clase al <html>elemento raíz usando Javascript?

javascript html Brandon Lebedev
fuente
esta fue una de las preguntas que hice cuando comencé. Nunca encontré un buen lugar que lo mencionara. Me alegro de verlo aquí.
Pow-Ian
Solo curiosidad, ¿por qué querrías hacer esto?
David Hoerster
@David Para agregar un respaldo en caso de que Modernizr no se cargue. Modernizr agrega la clase "js" cuando se carga.
Brandon Lebedev
1
Realmente debería agregar la clase "no-js" a su marcado si está usando modernizr. (Si modernizr carga, eliminará esta clase)
Kevin Boucher
@Kevin - Ya lo hice. ¡Vaya a HTML5 Boilerplate !
Brandon Lebedev

Respuestas:

110

Me gusta esto:

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

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

O use esto como su línea 'setter' para preservar cualquier clase aplicada previamente: (gracias @ ama2)

root.className += ' myCssClass';

O, según la compatibilidad del navegador requerida, puede utilizar el classList.add()método:

root.classList.add('myCssClass');

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

ACTUALIZAR:

Una solución más elegante para hacer referencia al HTMLelemento podría ser esta:

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//
Kevin Boucher
fuente
FYI, classlist.add / .remove no funciona en document.documentElement.
Andy Mercer
@AndyMercer Es classList.add(caso de camellos).
Kevin Boucher
Sí, obviamente, fue un error tipográfico. Pero lo que dije sigue siendo correcto. classListno funciona en document.documetElement.
Andy Mercer
Lo probé en tres navegadores diferentes antes de responder, por lo que no fue "obviamente un error tipográfico". (Chrome, Firefox, Safari: root.classList.add('myCssClass')funcionó en los tres). ¿Está usando IE?
Kevin Boucher
document.documentElement.classList.addparece funcionar bien aquí. ¿Los navegadores en 2018 comenzaron a admitir esto?
adrian
14

Esto también debería funcionar:

document.documentElement.className = 'myClass';

Compatibilidad .

Editar:

IE 10 reconoce que es de solo lectura; todavía:

¿¡Funcionó!?

Obras de ópera:

Trabajos

También puedo confirmar que funciona en:

  • Cromo 26
  • Firefox 19.02
  • Safari 5.1.7
c24w
fuente
Su ejemplo tiene CARACTERES INVISIBLES, es decir, U+200Bdespués del apóstrofe final, lo que hace que falle la compilación en el paquete web y otros compiladores.
entozoon
@entozoon que extraño! Gracias por señalar eso. Lo he arreglado ahora :)
c24w
11

Te recomiendo que eches un vistazo a jQuery .

forma jQuery:

$("html").addClass("myClass");
aebersold
fuente
26
No necesita jQuery para seleccionar un elemento con JavaScript.
David Hoerster
1
jQuery es de hecho fácil de aprender, y de todos modos se usa la mayor parte del tiempo, estos días. Pero sí, no lo necesita para esta tarea;)
aebersold
1
sí, claro, sabemos qué es jquery, pero responder una pregunta puramente de JavaScript con "aprender jquery" es lo que me sorprendió :)
povilasp
2
@aebersold Estoy de acuerdo en que jQuery es fácil de aprender y usar, pero con 50K para descargar (más una solicitud adicional) solo para agregar una clase, es un poco exagerado en mi humilde opinión.
David Hoerster
¡Muerte al jQuery! ¡Vanilla JS por la victoria!
Fresheyeball
7

Debe agregar la clase, no sobrescribirla 

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

Todavía recomendaría usar jQuery para evitar incompatibilidades con el navegador

ama2
fuente
-2

Con Jquery ... Puede agregar clases a elementos html como este:

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

nameclassorid sin punto o # al principio

Roos Bautista
fuente