Add class to <html> with Javascript?

Question

How do you add a class to the <html> root element using Javascript?

this was one of the questions I asked when I started out. I never did find a good place that mentioned it. I am glad to see it here. — Pow-Ian
– Pow-Ian, Commented Dec 20, 2012 at 21:46
@David To add a fallback in case Modernizr doesn't load. Modernizr adds the class "js" when it loads. — Brandon Lebedev
– Brandon Lebedev, Commented Dec 20, 2012 at 21:51
You should really add the class "no-js" to your markup if you are using modernizr. (If modernizr loads it will remove this class) — Kevin Boucher
– Kevin Boucher, Commented Dec 20, 2012 at 21:54

Kevin Boucher · Accepted Answer · 2016-03-09 00:32:59Z

161

Like this:

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

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

Or use this as your 'setter' line to preserve any previously applied classes: (thanks @ama2)

root.className += ' myCssClass';

Or, depending on the required browser support, you can use the classList.add() method:

root.classList.add('myCssClass');

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

UPDATE:

A more elegant solution for referencing the HTML element might be this:

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

edited Mar 9, 2016 at 0:32

answered Dec 20, 2012 at 21:45

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kelderic Over a year ago

FYI, classlist.add/.remove doesn't work on document.documentElement.

Kevin Boucher Over a year ago

@AndyMercer It's classList.add (camel case).

Kelderic Over a year ago

Yes obviously that was a typo. But what I said is still correct. classList doesn't work on document.documetElement.

Kevin Boucher Over a year ago

I tried it in three different browsers before replying, so it wasn't "obviously a typo." (Chrome, Firefox, Safari--root.classList.add('myCssClass') worked in all three.) Are you using IE?

adrian Over a year ago

document.documentElement.classList.add seems to work fine here. Have browsers in 2018 started supporting this?

Tom Esterez · Accepted Answer · 2019-03-13 21:20:20Z

27

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

classList is supported since ie10: https://caniuse.com/#search=classlist

edited Mar 13, 2019 at 21:20

answered Oct 27, 2017 at 17:18

Tom Esterez

22.2k8 gold badges45 silver badges46 bronze badges

Comments

c24w · Accepted Answer · 2019-04-12 08:51:54Z

22

This should also work:

document.documentElement.className = 'myClass';

Compatibility.

Edit:

IE 10 reckons it's readonly; yet:

It worked!?

Opera works:

Works

I can also confirm it works in:

Chrome 26
Firefox 19.02
Safari 5.1.7

edited Apr 12, 2019 at 8:51

answered Dec 20, 2012 at 21:47

c24w

8,0437 gold badges41 silver badges47 bronze badges

2 Comments

entozoon Over a year ago

Your example has INVISIBLE CHARACTERS, namely U+200B after the final apostrophe, causing it to fail compilation in webpack and other compilers!

c24w Over a year ago

@entozoon how strange! Thanks for pointing that out. I've fixed it now :)

aebersold · Accepted Answer · 2012-12-20 21:45:09Z

8

I'd recommend that you take a look at jQuery.

jQuery way:

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

answered Dec 20, 2012 at 21:45

aebersold

11.6k2 gold badges23 silver badges29 bronze badges

6 Comments

David Hoerster Over a year ago

You don't need jQuery to select an element with JavaScript.

aebersold Over a year ago

jQuery is infact easy to learn, and is used most of the time anyway, these days. But yes, you don't need it for this task ;)

povilasp Over a year ago

yeah, right, we know what jquery is, but answering a purely javascript question with "learn jquery" is what surprised me :)

David Hoerster Over a year ago

@aebersold I agree that jQuery is easy to learn and use, but at 50K to download (plus an additional request) just to add a class, it's a bit of overkill IMHO.

aebersold Over a year ago

@Mick thanks for pointing this out a decade after I wrote this answer.

|

ama2 · Accepted Answer · 2012-12-20 21:52:11Z

7

You should append class not overwrite it

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

I would still recommend using jQuery to avoid browser incompatibilities

edited Dec 20, 2012 at 21:52

answered Dec 20, 2012 at 21:46

ama2

2,6693 gold badges23 silver badges30 bronze badges

Comments

user7153178 · Accepted Answer · 2021-01-18 22:06:49Z

2

document.getElementsByTagName("html")[0].classList.add('theme-dark');
document.getElementsByTagName("html")[0].classList.remove('theme-dark')
document.getElementsByTagName("html")[0].classList.toggle('theme-dark')

answered Jan 18, 2021 at 22:06

user7153178

Comments

user1062954 · Accepted Answer · 2022-12-28 07:10:34Z

-1

<script>
    (function () {
        try {
            const mode = localStorage.getItem('darkMode');
            if (!JSON.parse(mode)) return;
            document.documentElement.classList.add('dark');
        } catch (e) {}
    })();
</script>

answered Dec 28, 2022 at 7:10

user1062954

171 bronze badge

1 Comment

trincot Over a year ago

This answer just repeats what was already answered a decade(!) ago. All the rest is irrelevant to the question.

Roos Bautista · Accepted Answer · 2017-03-27 23:53:47Z

-3

With Jquery... You can add class to html elements like this:

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

nameclassorid no point or # at the beginning

edited Mar 27, 2017 at 23:53

answered Mar 27, 2017 at 22:43

Roos Bautista

12 bronze badges

Collectives™ on Stack Overflow

Add class to <html> with Javascript?

8 Answers 8

5 Comments

Comments

2 Comments

6 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

2 Comments

6 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related