Question

我想在head标记内进行快速javascript检查，如下所示：

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

这不起作用。 Cannot read property classList of null，......很公平。如果我将<script>标记移动到<body>，一切正常，但我想要<script>中的<head>标记。

我有什么选择？

编辑：我应该对错误更加清楚。我意识到问题是当我试图添加类时身体没有加载。但是，我最初使用的是一些Modernizr，并且它在某种程度上能够从头部内部修改身体类，我不会认为它正在使用window.onload或类似的东西。

Answer 1

加载正文后运行代码。有几种方法可以解决这个问题：

将代码移动到全局上下文中定义的命名函数中，并在onload。

＆＃13;

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

＆＃13;

或将整个script标记移至页面末尾。

＆＃13;

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

＆＃13;

或者将代码移动到DOMContentLoaded事件侦听器回调，以便在加载dom元素后进行调用。

＆＃13;

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

＆＃13;

Answer 2

在执行javascript时，没有正文标记，因为浏览器还没有找到它。您需要在正文中添加脚本标记，或将其添加为事件以在文档加载时执行。有关示例，请参阅DOMContentLoaded。

使用vanilla javascript，从头部添加类到body

2 个答案: