JavaScript 中 Cannot set property 'className' of Null 错误
出现“Cannot set property 'className' of Null”错误的原因有两个：
-
将
className属性设置为空值（不存在的 DOM 元素）。 - 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。
下面是产生上述错误的示例代码。
const el = null;
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'className')
el.className = 'bg-coral';
要解决“Cannot set property 'className' of Null”错误，请确保要为其设置 className 属性的 DOM 元素存在。 如果您使用 getElementById() 方法并向其传递一个 DOM 中不存在的 ID，则最常发生该错误。
const el = document.getElementById('does-not-exist');
console.log(el); // 👉️ null
// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'className')
el.className = 'bg-coral';
在示例中，DOM 中不存在具有提供的 id 的元素，因此 getElementById 方法返回空值。 当我们尝试将 className 属性设置为空值时，会发生错误。
出现错误的另一个常见原因是在声明 DOM 元素之前放置 JS 脚本标记。
要解决“Cannot set property 'className' of null”错误，请确保在声明 HTML 元素后将 JS 脚本标记放置在正文的底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.bg-coral {
background-color: coral;
}
</style>
</head>
<body>
<!-- ⛔️ BAD - script is run before div exists ⛔️ -->
<script src="index.js"></script>
<div id="box">Hello world</div>
</body>
</html>
JS 脚本标记添加在声明 div 元素的代码之上。 index.js 文件在创建 div 元素之前运行，因此我们无法从 index.js 文件访问 div。
const el = document.getElementById('box');
console.log(el); // 👉️ null
// ⛔️ Error: Cannot set properties of null (setting 'className')
el.className = 'bg-coral';
相反，必须将 JS 脚本标记移动到它尝试访问的 DOM 元素下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.bg-coral {
background-color: coral;
}
</style>
</head>
<body>
<div id="box">Hello world</div>
<!-- ✅ GOOD - div already exists ✅ -->
<script src="index.js"></script>
</body>
</html>
现在，可以从 index.js 文件访问 div 元素。
const el = document.getElementById('box');
console.log(el); // 👉️ null
// ✅ Works
el.className = 'bg-coral';
现在 HTML 元素是在运行 index.js 脚本之前创建的，我们可以访问 DOM 元素并设置它的 className 属性。
总结
在以下情况下会发生“Cannot set property 'className' of Null”错误：
-
尝试将
className属性设置为空值（不存在的 DOM 元素） - 在声明 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 中获取字符串最后一个字符的方法
