Ajouter une classe à <html> avec Javascript?

Question 1

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

Question 2

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');
//

Question 3

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

Question 4

Je vous recommande de jeter un œil à jQuery .

jQuery façon:

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

Question 5

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

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

Question 6

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

Question 7

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

Answer 1

87

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

javascript html Brandon Lebedev
la 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

Answer 2

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

Answer 3

Juste curieux - pourquoi voudriez-vous faire cela?

David Hoerster

Answer 4

@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

Answer 5

1

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

Kevin Boucher

Answer 6

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

Brandon Lebedev

Answer 7

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
la 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

Answer 8

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

Andy Mercer

Answer 9

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

Kevin Boucher

Answer 10

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

Answer 11

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

Answer 12

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

adrian le

Answer 13

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
la 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

Answer 14

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

Answer 15

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

c24w

Answer 16

11

Je vous recommande de jeter un œil à jQuery .

jQuery façon:

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

aebersold
la 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

Answer 17

26

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

David Hoerster

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

Mort à la jQuery! Vanilla JS pour la victoire!

Fresheyeball

Answer 22

9

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

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

Tom Esterez
la source

Answer 23

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

Answer 24

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

Ajouter une classe à <html> avec Javascript?

Réponses: