Dodać klasę do <html> za pomocą JavaScript?

89

Jak dodać klasę do <html>elementu głównego za pomocą JavaScript?

javascript html

— Brandon Lebedev
źródło

to było jedno z pytań, które zadałem na początku. Nigdy nie znalazłem dobrego miejsca, które o tym wspomniało. Cieszę się, że to tutaj widzę.

— Pow-Ian

Po prostu ciekawy - dlaczego chcesz to zrobić?

— David Hoerster,

@David Aby dodać rezerwę na wypadek, gdyby Modernizr się nie załadował. Modernizr dodaje klasę „js” podczas ładowania.

— Brandon Lebedev,

1

Naprawdę powinieneś dodać klasę "no-js" do swojego znacznika, jeśli używasz modernizr. (Jeśli modernizator się załaduje, usunie tę klasę)

— Kevin Boucher

@Kevin - Już to zrobiłem. Idź do HTML5 Boilerplate !

— Brandon Lebedev,

115

Lubię to:

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

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

Lub użyj tego jako linii 'setter', aby zachować wszystkie wcześniej zastosowane klasy: (dzięki @ ama2)

root.className += ' myCssClass';

Lub, w zależności od wymaganej obsługi przeglądarki, możesz użyć classList.add()metody:

root.classList.add('myCssClass');

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

AKTUALIZACJA:

Bardziej eleganckim rozwiązaniem do odwoływania się do HTMLelementu może być:

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

— Kevin Boucher
źródło

FYI, classlist.add / .remove nie działa na document.documentElement.

— Andy Mercer

@AndyMercer It's classList.add(wielbłąd).

— Kevin Boucher

Tak, oczywiście to była literówka. Ale to, co powiedziałem, jest nadal poprawne. classListnie działa na document.documetElement.

— Andy Mercer

Wypróbowałem to w trzech różnych przeglądarkach przed odpowiedzią, więc nie była to „oczywiście literówka”. (Chrome, Firefox, Safari - root.classList.add('myCssClass')działały we wszystkich trzech). Czy używasz IE?

— Kevin Boucher

document.documentElement.classList.addwydaje się, że działa dobrze tutaj. Czy przeglądarki w 2018 roku zaczęły to obsługiwać?

— adrian

15

Powinno to również działać:

document.documentElement.className = 'myClass';

Zgodność .

Edytować:

IE 10 uważa, że jest tylko do odczytu; jeszcze:

Zadziałało!?

Opera działa:

Pracuje

Mogę również potwierdzić, że działa w:

Chrome 26
Firefox 19.02.2020
Safari 5.1.7

— c24w
źródło

Twój przykład ma NIEWIDOCZNE ZNAKI, mianowicie U+200Bpo ostatnim apostrofie, co powoduje niepowodzenie kompilacji w webpacku i innych kompilatorach!

— entozoon

@entozoon jakie dziwne! Dziękuję za zwrócenie uwagi. Naprawiłem to teraz :)

— c24w

11

Polecam zapoznać się z jQuery .

jQuery sposób:

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

— aebersold
źródło

26

Nie potrzebujesz jQuery, aby wybrać element z JavaScript.

— David Hoerster,

1

jQuery jest w rzeczywistości łatwy do nauczenia i jest obecnie używany przez większość czasu. Ale tak, nie potrzebujesz tego do tego zadania;)

— aebersold

1

tak, dobrze, wiemy, co to jest jquery, ale odpowiedź na czysto javascriptowe pytanie za pomocą „learn jquery” jest tym, co mnie zaskoczyło :)

— povilasp

2

@aebersold Zgadzam się, że jQuery jest łatwy do nauczenia i używania, ale przy 50K do pobrania (plus dodatkowe żądanie) tylko po to, aby dodać klasę, to trochę przesada IMHO.

— David Hoerster,

Śmierć jQuery! Vanilla JS o zwycięstwo!

— Fresheyeball

9

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

classListjest obsługiwany od ie10: https://caniuse.com/#search=classlist

— Tom Esterez
źródło

7

Powinieneś dołączyć klasę, a nie ją nadpisywać

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

Nadal zalecałbym używanie jQuery, aby uniknąć niekompatybilności przeglądarek

— ama2
źródło

-2

Za pomocą Jquery ... możesz dodać klasę do elementów html w następujący sposób:

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

nameclassorid no point lub # na początku

— Roos Bautista
źródło