JavaScript操作div样式报错Cannot read property 'style' of null，检查后可执行

这个问题我太熟了！出现Cannot read property 'style' of null的核心原因很简单——你在DOM元素还没被浏览器渲染出来的时候，就跑去执行了获取元素并修改样式的代码。

至于右键检查后再执行代码就正常，是因为当你打开开发者工具的时候，页面已经完全加载完毕，目标<div>早就存在于DOM树里了，这时候getElementById自然能找到它。

下面给你几个靠谱的解决方案：

• 方案1：把脚本放到页面最底部
  把你的JavaScript代码挪到</body>标签的紧前面，这样浏览器会先把所有DOM元素渲染完，再执行脚本：

  <body>
    <!-- 页面所有内容 -->
    <script>
      document.getElementById("63b71485db82c3005065f1eabf961985").style.color = "#42f45f";
    </script>
  </body>
  

• 方案2：监听DOM加载完成事件
  如果不想挪动脚本位置，可以用DOMContentLoaded事件，等浏览器把DOM完全解析好再执行代码：

  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("63b71485db82c3005065f1eabf961985").style.color = "#42f45f";
  });
  

  这个事件只会在DOM加载完成后触发，不需要等图片、样式表这些资源加载完，刚好符合你的需求。

• 额外小提醒
  虽然HTML5允许ID以数字开头，但还是要确认你的<div>的ID确实和代码里的完全一致——比如有没有多余的空格、大小写差异（不过你右键检查能找到，大概率没问题）。

内容的提问来源于stack exchange，提问作者Frederik Bruun