Javascript报错Undefined is not an object但元素已正确定义是什么原因？

你遇到的报错本质是header变量实际值为null或undefined，导致读取header.style属性失败，排除ID/类名拼写错误的前提，最可能的原因如下：

1. JS执行时机早于DOM渲染完成 #

这是90%以上同类问题的诱因：

• 触发逻辑：浏览器解析HTML是从上到下逐行执行的，如果你的JS代码写在<head>标签内，或是写在目标DOM元素的代码前面，执行document.getElementById("header")时，id为header的元素还没被解析到DOM树中，选择器自然返回null。
• 修复方案：
  • 方案一：将整个JS代码块移动到</body>闭合标签之前，确保所有DOM元素解析完成后再执行JS逻辑
  • 方案二：将代码包裹在DOM加载完成的事件回调中，示例如下：

document.addEventListener('DOMContentLoaded', function() {
  var header = document.getElementById("header");
  window.onscroll = function() {scrollFunction()};
  function scrollFunction() {
    if (document.body.scrollTop > 128 || document.documentElement.scrollTop > 128) {
      header.style.height = "48px";
    } else {
      header.style.height = "";
    }
  }
})

2. ID规则不符合规范 #

• 触发逻辑：
  • 页面存在多个相同id="header"的元素，DOM规范要求ID全局唯一，重复ID会导致选择器返回结果异常
  • ID对大小写敏感，哪怕拼写字母一致，大小写不同也会导致选择失败
• 修复方案：检查页面内所有元素ID保证全局唯一，核对选择器使用的ID与元素上的ID大小写完全一致。

3. 跨DOM上下文选择 #

• 触发逻辑：如果你的JS运行在iframe内部，要选择父页面的DOM，或是在父页面选择iframe内部的DOM，直接调用当前上下文的document选择器是无法拿到其他上下文的元素的，会返回null。
• 修复方案：指定对应文档上下文，例如父页面选iframe内元素用iframe节点.contentDocument.getElementById，iframe内选父页元素用parent.document.getElementById。

4. 前端框架场景下DOM未挂载 #

• 触发逻辑：如果使用Vue、React等前端框架，在组件挂载到DOM树之前就执行了选择逻辑（例如Vue的created生命周期、React组件初始化阶段直接调用选择器），此时组件对应的DOM还未生成，自然选择失败。
• 修复方案：在组件挂载完成的生命周期执行选择逻辑（Vue的mounted钩子、React的空依赖useEffect钩子），优先使用框架提供的ref API操作DOM，避免手动使用选择器。

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