Question

我刚刚开始学习DOM操作，并希望使用javaScript做一个简单的任务来更改h1的字体颜色，但是我收到了这个错误 - “无法读取null的属性'样式'”。我的js文件已连接到html，但下一行无效。请帮忙。

demo.html

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<h1>My Website</h1>
</body>
</html>

demo.js

alert("connected");
var h1=document.querySelector("h1");
h1.style.color="pink";

Answer 1

你必须在身体末端加载你的js链接。你是主要的DOM，但它没有完全加载，这就是为什么它给你空值。试试这个：

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
<h1>My Website</h1>
    <script type="text/javascript" src="demo.js"></script>
</body>

或者您可以在脚本标记中使用defer

<!DOCTYPE html>
    <html>
    <head>
        <title>My Site</title>
        <script type="text/javascript" src="demo.js" defer></script>
    </head>
    <body>
    <h1>My Website</h1>
    </body>

</html>

Answer 2

您必须等待加载DOM。

document.addEventListener('DOMContentLoaded', function(){"put your code here"});

获取JavaScript错误“无法在Dom操作中读取null的属性'样式'

2 个答案: