¿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

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

9

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

classListes compatible desde ie10: https://caniuse.com/#search=classlist

— Tom Esterez
fuente

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