解决 JavaScript 中 Cannot read properties of null (reading 'setAttribute') 错误
“Cannot read properties of null (reading 'setAttribute')”错误的发生有两个原因：
-
在不存在的 DOM 元素上调用
setAttribute()方法。 - 在声明 DOM 元素的 HTML 上方插入 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 方法。
在调用 setAttribute 之前确保 DOM 元素存在
要解决“Cannot read properties of null (reading 'setAttribute')”错误，需要确保我们用于获取 DOM 元素的 ID 有效。
该错误通常发生在使用无效 ID 调用 getElementById 方法时。
<!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>
在 HTML 代码中为元素设置的 ID 应与我们在调用 document.getElementById() 方法时传递的 ID 相匹配。
将 JS 脚本标签放在 body 标签的底部
要解决“Cannot read properties of null (reading 'setAttribute')”错误，需要确保在声明 DOM 元素后将 JS 脚本标记放在 body 标记的底部。
<!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 元素之前运行，因此我们无法访问 index.js 文件内的 div。
const el = document.getElementById('box');
console.log(el); // 👉️ null
// ⛔️ Cannot read properties of null (reading 'setAttribute')
el.setAttribute('style', 'color: green');
在创建 DOM 元素后，我们应该在正文底部插入 JS 脚本标记。
<!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>
现在可以在 index.js 文件中访问 div 元素。
const el = document.getElementById('box');
console.log(el); // 👉️ div#box
// ✅ works
el.setAttribute('style', 'color: green');
HTML 代码是从上到下解析的，因此 script 标签必须放在 body 标签的底部，在它需要访问的所有 DOM 元素之后。
总结
尝试对空值调用 setAttribute 方法时，会出现“Cannot read properties of null (reading 'setAttribute')”错误。
要解决该错误，需要确保为 getElementById 方法提供正确的 ID，并在创建 DOM 元素后加载 JS 脚本。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
