Question

继续出错，因为 getElementById 返回 null

2021-04-30

597

javascript

因此，我尝试使用 JavaScript 定位一个 div，但当我这样做时，我收到错误“Uncaught: TypeError: 无法读取 null 的属性‘style’”。然后我决定尝试 window.onLoad，因为页面可能没有完全加载，但我仍然收到错误。

说清楚一点，我知道 getElementById 返回 null，我现在只是在寻找解决方案。

HTML 代码：

!DOCTYPE html>
 <html>
 <head>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
 </head>
 <body>
    <div id="sjuku"></div>
 </body>
</html>

JavaScript 代码：

var square = document.getElementById("sjuku");

window.onload = function() {
    square.style.top = 100 + "px";
};

Answer 1

您的脚本在遇到 body 之前运行，因此此时元素不存在，并且您的 document.getElementById("sjuku") 行失败。将脚本移至结束 body 标记之前。

<!DOCTYPE html>
 <html>
 <head>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div id="sjuku"></div>
    
    <script src="main.js"></script>    
 </body>
</html>

并且，通过这样做，您实际上甚至不需要 onload 事件处理程序（除非您需要等待外部资源（如图像）完成加载），因为当解析器到达该位置时，所有 body HTML 都将被解析到内存中，并且您无需连接事件处理程序：

此外，如果您知道您想要 top 在 100px ，只需写入：

square.style.top = "100px";

因此，main.js 中的 JavaScript 可以只是：

document.getElementById("sjuku").style.top = "100px";

Answer 2

如果您将脚本标签保留在 head 元素中，则可以使用 defer 属性

<head>
 <link rel="stylesheet" href="style.css">
 <script src="main.js" defer></script>
</head>
<body>
...
</body>

defer 属性指定在页面解析完成后执行脚本。但请注意，这仅适用于外部脚本。