Using vanilla javascript, add class to body from within head

Question

I want to do a quick javascript check from within the head tag, like so:

<html>
    <head>
        ...
        <script>
            document.body.classList.remove("no-js");
            document.body.classList.add("js");
        </script>
    </head>
    <body class='no-js'>
        ...
    </body>
</html>

This doesn't work. Cannot read property classList of null, which...fair enough. If I move the <script> tag into <body>, everything works, but I want the <script> tag in <head>.

What are my options?

EDIT: I should have been much clearer about the error. I realize the problem is that body hasn't loaded when I'm trying to to add the class. However, I was using a bit of Modernizr originally and it was somehow able to modify the body class from within the head and I don't think it was using window.onload or anything like that.

Pranav C Balan Pranav C Balan · Accepted Answer · 2017-01-25T07:07:05

Run the code after body is loaded. There are several approaches to solve the problem:

Move the code into a named function defined in global context and call it in onload.

<html>

<head>
  ...
  <script>
    function load() {
      document.body.classList.remove("no-js");
      document.body.classList.add("js");
    }
  </script>
</head>

<body onload="load();" class='no-js'>
  ...
</body>

</html>

Or move code to DOMContentLoaded event listener callback in order to call after dom elements are loaded.

<html>

<head>
  ...
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.body.classList.remove("no-js");
      document.body.classList.add("js");
    });
  </script>
</head>

<body class='no-js'>
  ...
</body>

</html>

Or move the entire script tag to the end of the page.

<html>

<head>
  ...
</head>

<body class='no-js'>
  ...
  <script>
    document.body.classList.remove("no-js");
    document.body.classList.add("js");
  </script>
</body>


</html>

Using vanilla javascript, add class to body from within head

2 Answers