无法读取 null 的属性（读取“setAttribute”）

TypeError: Cannot read property ‘setAttribute’ of Null in JS

“无法读取 null 的属性（读取‘setAttribute’）”错误的发生有两个原因：

setAttribute()在不存在的 DOM 元素上调用方法。
在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法读取 null 的属性 setattribute

下面是错误如何发生的示例。

索引.js


const el = document.getElementById('does-not-exist');
console.log(el); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
el.setAttribute('style', 'color: green');

我们试图在导致错误的值setAttribute上调用该方法。null

在调用之前确保 DOM 元素存在`setAttribute`

确保id您用来获取 DOM 元素的方法有效。

getElementById使用无效的
调用方法时通常会发生错误id。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ✅ `id` should match with JS code  -->
    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

idHTML 代码中元素上的设置应与您在方法调用中传递的设置相id匹配document.getElementById()。

将JS脚本标签放在body标签的底部

确保在声明 DOM 元素后将 JS 脚本标记放在 body 标记的底部。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ❌ BAD - script is run before div is created ❌ -->
    <script src="index.js"></script>

    <div id="box"></div>
  </body>
</html>

请注意，JS 脚本标记位于div元素上方。

因此index.js文件在创建 HTML 元素之前运行，因此您无法访问文件div内部index.js。

索引.js


const el = document.getElementById('box');
console.log(el); // 👉️ null

// ⛔️ Cannot read properties of null (reading 'setAttribute')
el.setAttribute('style', 'color: green');

在创建 DOM 元素后，您应该在正文底部插入 JS 脚本标记。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box"></div>

    <!-- ✅ GOOD - div is already created ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在div可以在文件内部访问该元素index.js。

索引.js


const el = document.getElementById('box');
console.log(el); // 👉️ div#box

// ✅ works
el.setAttribute('style', 'color: green');

HTML 代码是从上到下解析的，因此 script 标签必须放在 body 标签的底部，在它需要访问的所有 DOM 元素之后。

结论

尝试在值上调用setAttribute方法时发生“无法读取 null 的属性（读取‘setAttribute’）”错误null。

要解决该错误，请确保您提供正确的id方法
getElementById并在创建 DOM 元素后加载 JS 脚本。