Ajouter une classe à <html> avec Javascript?

87

Comment ajouter une classe à l' <html>élément racine en utilisant Javascript?

javascript html

— Brandon Lebedev
source

c'était l'une des questions que j'ai posées quand j'ai commencé. Je n'ai jamais trouvé un bon endroit qui en parle. Je suis content de le voir ici.

— Pow-Ian

Juste curieux - pourquoi voudriez-vous faire cela?

— David Hoerster

@David Pour ajouter une solution de secours au cas où Modernizr ne se chargerait pas. Modernizr ajoute la classe "js" lors du chargement.

— Brandon Lebedev

1

Vous devriez vraiment ajouter la classe "no-js" à votre balisage si vous utilisez modernizr. (Si modernizr charge, il supprimera cette classe)

— Kevin Boucher

@Kevin - Déjà fait. Passez à la plaque chauffante HTML5 !

— Brandon Lebedev

110

Comme ça:

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

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

Ou utilisez ceci comme ligne de 'setter' pour conserver toutes les classes précédemment appliquées: (merci @ ama2)

root.className += ' myCssClass';

Ou, en fonction de la prise en charge du navigateur requise, vous pouvez utiliser la classList.add()méthode:

root.classList.add('myCssClass');

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

MISE À JOUR:

Une solution plus élégante pour référencer l' HTMLélément pourrait être la suivante:

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

— Kevin Boucher
source

Pour info, classlist.add / .remove ne fonctionne pas sur document.documentElement.

— Andy Mercer

@AndyMercer C'est classList.add(cas de chameau).

— Kevin Boucher

Oui, c'était évidemment une faute de frappe. Mais ce que j'ai dit est toujours correct. classListne fonctionne pas sur document.documetElement.

— Andy Mercer

Je l'ai essayé dans trois navigateurs différents avant de répondre, donc ce n'était pas "manifestement une faute de frappe". (Chrome, Firefox, Safari - ont root.classList.add('myCssClass')fonctionné dans les trois.) Utilisez-vous IE?

— Kevin Boucher

document.documentElement.classList.addsemble bien fonctionner ici. Les navigateurs en 2018 ont-ils commencé à prendre en charge cela?

— adrian le

14

Cela devrait également fonctionner:

document.documentElement.className = 'myClass';

La compatibilité .

Éditer:

IE 10 estime qu'il est en lecture seule; encore:

Ça a marché!?

Œuvres d'opéra:

Travaux

Je peux également confirmer que cela fonctionne dans:

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
source

Votre exemple a des CARACTERES INVISIBLES, à savoir U+200Baprès l'apostrophe finale, ce qui fait échouer la compilation dans le webpack et d'autres compilateurs!

— entozoon

@entozoon comme c'est étrange! Merci d'avoir fait remarquer cela. Je l'ai corrigé maintenant :)

— c24w

11

Je vous recommande de jeter un œil à jQuery .

jQuery façon:

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

— aebersold
source

26

Vous n'avez pas besoin de jQuery pour sélectionner un élément avec JavaScript.

— David Hoerster

1

jQuery est en fait facile à apprendre et est utilisé la plupart du temps de toute façon, de nos jours. Mais oui, vous n'en avez pas besoin pour cette tâche;)

— aebersold

1

oui, c'est vrai, nous savons ce qu'est jquery, mais répondre à une question purement javascript avec "learn jquery" est ce qui m'a surpris :)

— povilasp

2

@aebersold Je suis d'accord que jQuery est facile à apprendre et à utiliser, mais à 50K à télécharger (plus une demande supplémentaire) juste pour ajouter une classe, c'est un peu exagéré à mon humble avis.

— David Hoerster

Mort à la jQuery! Vanilla JS pour la victoire!

— Fresheyeball

9

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

classListest pris en charge depuis ie10: https://caniuse.com/#search=classlist

— Tom Esterez
source

7

Vous devez ajouter la classe et non l'écraser

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

Je recommanderais toujours d'utiliser jQuery pour éviter les incompatibilités de navigateur

— ama2
source

-2

Avec Jquery ... Vous pouvez ajouter une classe à des éléments html comme ceci:

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

nameclassorid no point ou # au début

— Roos Bautista
source