The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

CSS for when JavaScript is Enabled

Last updated on:
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. James
    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. DN
    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.

    • Jaybuz
      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.

    • mike
      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. elundmark
    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. Ant

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

  5. 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. Mayank
    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??

    • 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed