极客教程JavaScript 抛出错误“无法读取null的style属性”
在本文中，我们将看到如何在JavaScript中收到一个错误消息“无法读取null的style属性”，并通过一个示例了解导致此错误的原因。然后我们将尝试通过对代码片段进行一些小的改动来纠正它。
当我们试图访问一个属性时，要么它没有任何值（甚至没有正确定义），要么它在整个代码片段中没有被定义，那么就有可能出现此错误。下面是浏览器控制台包含错误信息的图形表示（以红色显示）。
我们将通过示例来理解概念。
示例1： 在第一个示例中，我们将创建一个HTML文档（命名为“ index.js ”，或者是其他用户自定义的名称），然后创建一个包含一些文本的div标签，我们最初将它的颜色设为绿色（下面是代码片段）。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<!-- This is really a bad technique to
call JavaScript file just after the body tag-->
<!-- This is the reason why we receive that
shown error in console itself-->
<script src="index.js"></script>
<div id="id_1" style="color: green;">
GeeksforGeeks
</div>
</body>
</html>
输出结果:
然后，我们将创建另一个文件，这是一个JavaScript文件（命名为“ index.js ”或任何其他用户定义的名称），我们将使用它来访问div框的id，然后尝试在浏览器的控制台中显示其值，进一步尝试更改它的值，然后我们将查看输出部分，了解我们在想要更改它或者显示它时所见到的确切值。
JavaScript
let id = document.getElementById("id_1");
console.log(id);
// Cannot read properties null error
// will be received...
id.style.color = "blue";
现在，当我们刷新页面并打开浏览器的控制台，下面的输出将显示出来。
输出：
现在，正如我们所看到和想象的那样，我们已经收到了 null 这是因为我们在div标签之前调用了我们的脚本标签，所以 document.getElementById() 无法获取div标签内现有的id值。
让我们看下另一个示例，展示了我们如何通过一些小的修改来进行修正。
示例2： 在这个示例中，我们将考虑我们在之前示例中所做的一切，并且在此处我们将尝试做一些小的修改，首先是将<script>标签放在<div>标签后面，并且在最后调用它是最佳实践，这将帮助它们在某些情况下不会无限运行。这是我们的HTML文件，在其中进行了一些更改。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<div id="id_1" style="color: green;">
GeeksforGeeks
</div>
<script src="index.js"></script>
</body>
</html>
以下展示的是我们的JavaScript文件，它自身也有一些修改。
JavaScript
let id = document.getElementById("id_1");
console.log(id);
// This works perfectly now.....
id.style.color = "blue";
输出：
下面是浏览器控制台中显示的图像，显示了包含 id 和初始值的 div 块本身。
注意： 请务必记住不要在 body 标签后面立即调用脚本标签，以避免文件以及加载和工作过程中的某些异常情况。