Code Snippet
CSS for when JavaScript is Enabled
document.documentElement.className = "js"This adds a class to the root <html>, so you could (for example) do something like hide a <div> only when JavaScript is enabled.
.js div#id { display: none; }document.documentElement.className = "js"This adds a class to the root <html>, so you could (for example) do something like hide a <div> only when JavaScript is enabled.
.js div#id { display: none; }
This doesn’t add a class to the body; it adds a class to the root element (i.e. the “html” tag)…
fixed.
The jQuery version of this (not that you really need it, but if you’re using it anyway) is:
$("body").addClass("js");I always put it right up top, with anything else that’s generic. I also usually use the class “has-js” just because a two-letter class name makes me nervous (plugins or whatnot) and it’s an eensy bit more meaningful.
I have an additional trick for you guys; Alongside this class being Added to the body, I Remove a class that was in the body tag. So a user withOut JS will get
<body class="xhtml">while a user With JS turned on will get
<body class="js">( … by removing the class ‘xhtml’ and adding ‘js’ )
= By having a default class in the body tag it makes things easier to do “flash on load” fixes like when replacing links with Flash-content f.i., plus I find that it simplifies and prettifies the CSS a whole lot ;)
I use it often to open all hidden menus, and collapse when js is enabled.