点击按钮修改div宽度时报Cannot read property 'style' of null错误如何解决

这个Cannot read property 'style' of null报错的核心原因是：你代码中尝试访问style属性的DOM元素没有被正确获取到，对应变量的值为null。
常见触发场景如下：

• JS代码执行时机早于DOM渲染完成：如果你的JS代码放在<head>标签内，或者放在对应DOM元素的定义位置之前，浏览器加载页面时会先执行JS代码，此时目标DOM还没有被渲染到页面上，document.getElementById自然无法拿到对应元素，返回值为null
• 元素ID拼写不匹配：HTML中定义的元素ID，和getElementById传入的参数不一致（ID区分大小写，多一个字符少一个字符都会导致匹配失败）
• React项目中操作时机错误：如果是在React项目中直接在全局/组件顶层执行getElementById，此时React组件还没有完成挂载，对应的DOM节点还没有生成，必然无法获取到元素

1. 调整JS执行时机
   把你的JS代码移到</body>结束标签之前，保证所有DOM渲染完成后再执行JS。也可以用DOMContentLoaded事件包裹JS逻辑，示例如下：

document.addEventListener('DOMContentLoaded', function() {
  // 把你原有获取DOM元素和定义函数的代码放在这里
  var sideNav = document.getElementById("side-nav");
  var linksSideNavTop = document.getElementById("links-side-nav-top");
  var linksSideNavBottom = document.getElementById("links-side-nav-bottom");

  window.openMenuTablet = function() {
    if (sideNav.style.width === '70px') {
        sideNav.style.width = '300px';
        linksSideNavTop.style.display = "block";
        linksSideNavBottom.style.display = "block";
    } else {
        sideNav.style.width = '70px';
        linksSideNavTop.style.display = "none";
        linksSideNavBottom.style.display = "none";
    }
  }
})

2. 核对ID拼写
   检查HTML代码中三个目标元素的ID属性，确保和JS中getElementById的参数完全一致，没有拼写错误、大小写错误。
3. React场景适配
   如果是React项目，不要直接用getElementById操作DOM，改用React官方推荐的useRef绑定DOM节点，示例代码如下：

import { useRef } from 'react'

function NavComponent() {
  const sideNavRef = useRef(null)
  const linksTopRef = useRef(null)
  const linksBottomRef = useRef(null)

  const openMenuTablet = () => {
    const sideNav = sideNavRef.current
    const linksTop = linksTopRef.current
    const linksBottom = linksBottomRef.current
    // 非空判断兜底，避免报错
    if (!sideNav || !linksTop || !linksBottom) return
    if (sideNav.style.width === '70px') {
      sideNav.style.width = '300px'
      linksTop.style.display = 'block'
      linksBottom.style.display = 'block'
    } else {
      sideNav.style.width = '70px'
      linksTop.style.display = 'none'
      linksBottom.style.display = 'none'
    }
  }

  return (
    <>
      <button onClick={openMenuTablet}>切换菜单</button>
      <div id="side-nav" ref={sideNavRef} style={{width: '70px'}}>
        <div id="links-side-nav-top" ref={linksTopRef} style={{display: 'none'}}>顶部导航链接</div>
        <div id="links-side-nav-bottom" ref={linksBottomRef} style={{display: 'none'}}>底部导航链接</div>
      </div>
    </>
  )
}

4. 增加非空判断兜底
   不管是原生JS还是React场景，操作DOM之前都可以加一层非空判断，就算元素获取失败也不会直接抛出报错中断代码运行。

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