Comments on: Marking a Page with “JavaScript enabled”

By: Klaus

Klaus — Sat, 19 Sep 2009 02:38:47 +0000

Another variation of this would be:

document.body.className += (document.body.className !== "") ? " js" : "js";

By: hitch

hitch — Wed, 13 Aug 2008 10:11:45 +0000

I think adding a class to the root element produces invalid HTML.

By: Andreas Lagerkvist

Andreas Lagerkvist — Mon, 11 Aug 2008 13:24:05 +0000

This is a great trick but I usually start out by giving body a “js-disabled”-class and then replace that with “js-enabled”.

This way you can specifically style when JS is disabled as well as when it is enabled without using the :not() pseudo-class (body:not(.js)).

By: Dirk Ginader

Dirk Ginader — Wed, 30 Jul 2008 06:52:52 +0000

Yoan’s Code works. The “Trick” in his Case is simply to not add the Class to the Body Element but to the root Node of the Document i.e. the HTML Element. I’m not too sure if this is the right place for the JS-Class but I like the execution speed of it as well as the Javascript being outside of the Body.

By: Mike West

Mike West — Tue, 29 Jul 2008 18:26:19 +0000

Yoan’s right. I just tested his code across the A-level browsers, and it works, even though the body element doesn’t actually exist at the time it’s executed. I don’t understand _how_ it works, but it looks like it does.

By: Chris Heilmann

Chris Heilmann — Tue, 29 Jul 2008 16:55:08 +0000

This is a classic trick, but I am not too sure about the display:none trick. We know that display:none is not displaying things and was assume that screen readers also do not find it – however not all follow this convention.

So in order to really make sure that things don’t show up at all we should remove them from the document before replacing them with the real, fancy interface.

By: Yoan

Yoan — Tue, 29 Jul 2008 16:13:56 +0000

document.documentElement.className += ” js”;

will work inside the head tag keeping the body clean. You’ll have then instead of body and it works as expected, quite well.

Cheers,