Question

我有简单的代码：

var aso=document.querySelector("body");
aso.style.background="yellow";

这是在单独的.js文件中编写的。打开页面时，它显示错误：

simple.js:2 Uncaught TypeError: Cannot read property 'style' of null
    at simple.js:2

但是当我在控制台窗口中运行此代码时，它工作正常，但在单独的JS文件中显示错误。

Answer 1

可能是因为在加载DOM之前在HTML文件中链接了JS文件，所以您的查询选择器找不到所需的元素。

尝试将<script>标记移到HTML文件的底部。

Answer 2

这是一个dom问题，必须在dom加载后运行脚本。有很多方法可以在dom之后执行js函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    // self executing function here
    (function() {
       // your page initialization code here
       // the DOM will be available here
        var aso=document.querySelector("body");
        aso.style.background="yellow";
    })();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
    var aso=document.querySelector("body");
        aso.style.background="yellow";
});
</script>
</body>
</html>

谁能告诉我突然面对这个问题的原因？

2 个答案: