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


89

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


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,

Odpowiedzi:


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

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

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");

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


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


-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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.