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; }


  1. User Avatar
    Permalink to comment#

    This doesn’t add a class to the body; it adds a class to the root element (i.e. the “html” tag)…

  2. User Avatar
    Permalink to comment#

    The jQuery version of this (not that you really need it, but if you’re using it anyway) is:


    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.

    • User Avatar
      Permalink to comment#

      I idea of this code is to be as fast as possible. It should be placed just below your CSS files in the head element as a plain JavaScript snippet. You’ll want to load jQuery at the bottom of your document just before the closing body tag because downloading JavaScript files blocks the rendering of the page.

      Personally I use this snippet:

      <script>(function(h){h.className = h.className.replace('no-js', 'js')})(document.documentElement)</script>

      It will replace the class of “no-js” to “js” on the HTML element while preserving all other class names that may be there.

    • User Avatar
      Permalink to comment#

      Realistically this won’t work as well as the other examples.
      You have to download jQuery (and probably all the CSS and images) before it can add the class name.

      That will cause the occasional flash of no-js content before the jQuery command kicks in and fires the CSS.

      This method is better stated as a solo piece of JS straight after the page title and before and CSS:

      <script type=”text/javascript”>/<![CDATA[/document.documentElement.className=”hasJS”;/]]>/</script>

      Has worked incredibly well for me for the last 6+ years.

  3. User Avatar
    Permalink to comment#

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

  4. User Avatar

    I use it often to open all hidden menus, and collapse when js is enabled.

  5. User Avatar
    Wayne Parkes
    Permalink to comment#

    I use the technique outlined in the article but recommend adding a space before the class like so: ” js”. This way if any classes exist already, it’s easily appended to the class string, otherwise, the space is simply ignored.

  6. User Avatar
    Permalink to comment#

    I have downloaded a theme which works perfect offline. but when I uploaded the same thing on web server , it doesn’t work. Page seems to be blank. theme is based on DOM

            //* hide all elements & show preloader
            document.documentElement.className += 'js';
                $(document).ready(function() {
                    //* show all elements & remove preloader

    Can u help on this please??

    • User Avatar
      Reza Baiat
      Permalink to comment#

      document.documentElement.className += ‘ js ‘; // NOTE: ‘[space]js[space]’

      $(document).ready(function() {
              document.documentElement.className = 
                       document.documentElement.className.replace(/\sjs\s/, ' ');

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.