Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. 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. Permalink to comment#

    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.

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

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

        <script>
            //* hide all elements & show preloader
            document.documentElement.className += 'js';
        </script>
    
            <script>
                $(document).ready(function() {
                    //* show all elements & remove preloader
                    setTimeout('$("html").removeClass("js")',1000);
                });
            </script>
    

    Can u help on this please??

    • Reza Baiat
      Permalink to comment#

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

      <script>
      $(document).ready(function() {
          setTimeout(function(){
              document.documentElement.className = 
                       document.documentElement.className.replace(/\sjs\s/, ' ');
          },1000);
      });
      </script>
      

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".