JS新建DOM元素设置样式报Cannot read property 'style' of null如何解决

你通过document.createElement创建的DOM元素仅存在于内存中，尚未被挂载到当前页面的DOM树上。而document.getElementById只能检索到已经挂载到DOM树中的节点，因此你的第三行代码执行时document.getElementById("ExtensionBox")返回结果为null，尝试访问null的style属性就触发了该类型错误。

有两种可行的修复方式，优先推荐第一种：

• 方案1：直接使用已有的元素引用修改样式，无需额外DOM查询
  修复后代码：

  const box = document.createElement("div");
  box.id = "ExtensionBox";
  box.style.height = "600px";
  box.style.background = "red";
  // 如果需要元素显示在页面上，最后追加到DOM树即可
  document.body.appendChild(box);
  

• 方案2：先将元素挂载到DOM树，再通过ID查询修改样式
  修复后代码：

  const box = document.createElement("div");
  box.id = "ExtensionBox";
  // 先挂载到DOM树
  document.body.appendChild(box);
  document.getElementById("ExtensionBox").style.height = "600px";
  document.getElementById("ExtensionBox").style.background= "red";
  

内容的提问来源于stack exchange，提问作者hamdi salim