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 脚本标签
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
