Klasse mit Javascript zu <html> hinzufügen?

Question 1

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

Question 2

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

Question 3

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

Question 4

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

jQuery Weg:

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

Question 5

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

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

Question 6

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

Question 7

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

Answer 1

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

Answer 2

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

Answer 3

Nur neugierig - warum willst du das tun?

David Hoerster

Answer 4

@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

Answer 5

1

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

Kevin Boucher

Answer 6

@ Kevin - Schon getan. Gehen Sie HTML5 Boilerplate !

Brandon Lebedev

Answer 7

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

Answer 8

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

Andy Mercer

Answer 9

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

Kevin Boucher

Answer 10

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

Andy Mercer

Answer 11

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

Answer 12

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

Adrian

Answer 13

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

Answer 14

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

Entozoon

Answer 15

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

c24w

Answer 16

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

Answer 17

26

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

David Hoerster

Answer 18

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

Answer 19

1

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

Povilasp

Answer 20

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

Answer 21

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

Fresheyeball

Answer 22

8

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

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

Tom Esterez
quelle

Answer 23

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

Answer 24

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

Klasse mit Javascript zu <html> hinzufügen?

Antworten: