解决"Cannot read property 'style' of null"错误：多页面共用JS适配方案

这问题太常见了！共用脚本的时候经常会碰到这种“有的页面有元素，有的页面没有”的情况，直接操作就会炸出Cannot read property 'style' of null的错误，其实只需要加个简单的判断就能搞定，给你两种实用的方案：

方案1：先检查元素是否存在再操作 #

这是最稳妥、兼容性最好的写法，不管你的项目支持什么浏览器都能用。核心思路就是在访问元素的style属性之前，先确认这个元素确实存在：

// 获取输入框和目标元素
const lNameInput = document.getElementById('LName');
const text2Element = document.getElementById('text2');

// 只有当text2元素存在时，才执行显示/隐藏逻辑
if (text2Element) {
  if (!lNameInput.value) {
    text2Element.style.display = 'none';
  } else {
    text2Element.style.display = 'block';
  }
}

页面1里text2存在，逻辑正常执行；页面2里text2是null，整个条件块直接跳过，自然就不会报错了。

方案2：用可选链操作符简化代码（ES2020+） #

如果你的项目支持现代浏览器（比如Chrome 80+、Firefox 74+），可以用ES2020新增的可选链操作符（?.），写法更简洁：

const lNameInput = document.getElementById('LName');

if (!lNameInput.value) {
  // 如果text2不存在，?.会直接终止后续操作，不会报错
  document.getElementById('text2')?.style.display = 'none';
} else {
  document.getElementById('text2')?.style.display = 'block';
}

可选链的作用就是：如果document.getElementById('text2')返回null或者undefined，后面的.style.display就不会被执行，完美避免报错。

两种方案都能保留单个JS文件，同时让两个页面都正常运行，你可以根据项目的浏览器兼容性需求来选～

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