Klasse mit Javascript zu <html> hinzufügen?

87

Wie fügt man dem <html>Stammelement mit Javascript eine Klasse hinzu ?

javascript html

— Brandon Lebedev
quelle

Dies war eine der Fragen, die ich gestellt habe, als ich anfing. Ich habe nie einen guten Ort gefunden, an dem es erwähnt wurde. Ich bin froh, es hier zu sehen.

— Pow-Ian

Nur neugierig - warum willst du das tun?

— David Hoerster

@David Zum Hinzufügen eines Fallbacks für den Fall, dass Modernizr nicht geladen wird. Modernizr fügt beim Laden die Klasse "js" hinzu.

— Brandon Lebedev

1

Sie sollten die Klasse "no-js" wirklich zu Ihrem Markup hinzufügen, wenn Sie modernizr verwenden. (Wenn modernizr

— Kevin Boucher

@ Kevin - Schon getan. Gehen Sie HTML5 Boilerplate !

— Brandon Lebedev

107

So was:

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

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

Oder verwenden Sie dies als Ihre 'Setter'-Zeile, um alle zuvor angewendeten Klassen beizubehalten: (danke @ ama2)

root.className += ' myCssClass';

Abhängig von der erforderlichen Browserunterstützung können Sie die folgende classList.add()Methode verwenden:

root.classList.add('myCssClass');

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

AKTUALISIEREN:

Eine elegantere Lösung für die Referenzierung des HTMLElements könnte sein:

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

— Kevin Boucher
quelle

Zu Ihrer Information, classlist.add / .remove funktioniert nicht mit document.documentElement.

— Andy Mercer

@ AndyMercer Es ist classList.add(Kamel Fall).

— Kevin Boucher

Ja, das war offensichtlich ein Tippfehler. Aber was ich gesagt habe, ist immer noch richtig. classListfunktioniert nicht mit document.documetElement.

— Andy Mercer

Ich habe es in drei verschiedenen Browsern versucht, bevor ich geantwortet habe, also war es nicht "offensichtlich ein Tippfehler". (Chrome, Firefox, Safari - root.classList.add('myCssClass')funktionierte in allen drei.) Verwenden Sie IE?

— Kevin Boucher

document.documentElement.classList.addscheint hier gut zu funktionieren. Haben Browser im Jahr 2018 damit begonnen, dies zu unterstützen?

— Adrian

12

Dies sollte auch funktionieren:

document.documentElement.className = 'myClass';

Kompatibilität .

Bearbeiten:

IE 10 geht davon aus, dass es schreibgeschützt ist. noch:

Es funktionierte!?

Opera funktioniert:

Funktioniert

Ich kann auch bestätigen, dass es funktioniert in:

Chrome 26
Firefox 19.02
Safari 5.1.7

— c24w
quelle

Ihr Beispiel enthält UNSICHTBARE ZEICHEN, und zwar U+200Bnach dem letzten Apostroph, wodurch die Kompilierung in Webpack und anderen Compilern fehlschlägt!

— Entozoon

@entozoon wie seltsam! Vielen Dank für den Hinweis. Ich habe es jetzt behoben :)

— c24w

11

Ich würde empfehlen, dass Sie sich jQuery ansehen .

jQuery Weg:

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

— aebersold
quelle

26

Sie benötigen jQuery nicht, um ein Element mit JavaScript auszuwählen.

— David Hoerster

1

jQuery ist sehr einfach zu erlernen und wird heutzutage sowieso die meiste Zeit verwendet. Aber ja, du brauchst es nicht für diese Aufgabe;)

— aebersold

1

Ja, richtig, wir wissen, was JQuery ist, aber die Beantwortung einer rein Javascript-Frage mit "Learn JQuery" hat mich überrascht :)

— Povilasp

2

@aebersold Ich stimme zu, dass jQuery einfach zu erlernen und zu verwenden ist, aber bei 50K zum Herunterladen (plus einer zusätzlichen Anfrage), nur um eine Klasse hinzuzufügen, ist es meiner Meinung nach ein bisschen übertrieben.

— David Hoerster

Tod der jQuery! Vanilla JS für den Sieg!

— Fresheyeball

8

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

classListwird seit ie10 unterstützt: https://caniuse.com/#search=classlist

— Tom Esterez
quelle

7

Sie sollten die Klasse anhängen und nicht überschreiben

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

Ich würde weiterhin empfehlen, jQuery zu verwenden, um Browser-Inkompatibilitäten zu vermeiden

— ama2
quelle

-2

Mit Jquery ... Sie können HTML-Elementen wie folgt eine Klasse hinzufügen:

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

nameclassorid kein Punkt oder # am Anfang

— Roos Bautista
quelle