Aggiungere una classe a <html> con Javascript?

88

Come si aggiunge una classe <html>all'elemento radice utilizzando Javascript?

javascript html

— Brandon Lebedev
fonte

questa è stata una delle domande che ho posto quando ho iniziato. Non ho mai trovato un buon posto che lo menzionasse. Sono contento di vederlo qui.

— Pow-Ian

Sono solo curioso: perché dovresti farlo?

— David Hoerster

@David Per aggiungere un fallback nel caso in cui Modernizr non venga caricato. Modernizr aggiunge la classe "js" al caricamento.

— Brandon Lebedev

1

Dovresti davvero aggiungere la classe "no-js" al tuo markup se stai usando modernizr. (Se modernizr viene caricato rimuoverà questa classe)

— Kevin Boucher

@Kevin - Già fatto. Vai a HTML5 Boilerplate !

— Brandon Lebedev

114

Come questo:

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

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

Oppure usalo come riga 'setter' per preservare le classi precedentemente applicate: (grazie @ ama2)

root.className += ' myCssClass';

Oppure, a seconda del supporto del browser richiesto, puoi utilizzare il classList.add()metodo:

root.classList.add('myCssClass');

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

AGGIORNARE:

Una soluzione più elegante per fare riferimento HTMLall'elemento potrebbe essere questa:

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

— Kevin Boucher
fonte

Cordiali saluti, classlist.add / .remove non funziona su document.documentElement.

— Andy Mercer

@ AndyMercer It's classList.add(camel case).

— Kevin Boucher

Sì, ovviamente, era un errore di battitura. Ma quello che ho detto è ancora corretto. classListnon funziona su document.documetElement.

— Andy Mercer

L'ho provato in tre diversi browser prima di rispondere, quindi non era "ovviamente un errore di battitura". (Chrome, Firefox, Safari - hanno root.classList.add('myCssClass')funzionato in tutti e tre.) Stai usando IE?

— Kevin Boucher

document.documentElement.classList.addsembra funzionare bene qui. I browser nel 2018 hanno iniziato a supportarlo?

— adrian

15

Questo dovrebbe funzionare anche:

document.documentElement.className = 'myClass';

Compatibilità .

Modificare:

IE 10 calcola che è di sola lettura; ancora:

Ha funzionato!?

Opera opere:

Lavori

Posso anche confermare che funziona in:

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
fonte

Il tuo esempio ha CARATTERI INVISIBILI, vale a dire U+200Bdopo l'apostrofo finale, che fa fallire la compilazione in webpack e altri compilatori!

— entozoon

@entozoon che strano! Grazie per la segnalazione. L'ho risolto ora :)

— c24w

11

Ti consiglio di dare un'occhiata a jQuery .

Modo jQuery:

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

— aebersold
fonte

26

Non è necessario jQuery per selezionare un elemento con JavaScript.

— David Hoerster

1

jQuery è infatti facile da imparare ed è usato comunque la maggior parte del tempo, in questi giorni. Ma sì, non ne hai bisogno per questo compito;)

— aebersold il

1

sì, giusto, sappiamo cos'è jquery, ma rispondere a una domanda puramente javascript con "impara jquery" è ciò che mi ha sorpreso :)

— povilasp

2

@aebersold Sono d'accordo che jQuery è facile da imparare e da usare, ma a 50K da scaricare (più una richiesta aggiuntiva) solo per aggiungere una classe, è un po 'eccessivo IMHO.

— David Hoerster

Morte a jQuery! Vanilla JS per la vittoria!

— Fresheyeball

9

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

classListè supportato da ie10: https://caniuse.com/#search=classlist

— Tom Esterez
fonte

7

Dovresti aggiungere la classe senza sovrascriverla

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

Consiglio comunque di utilizzare jQuery per evitare incompatibilità del browser

— ama2
fonte

-2

Con Jquery ... puoi aggiungere una classe agli elementi html in questo modo:

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

nameclassorid nessun punto o # all'inizio

— Roos Bautista
fonte