实现JS鼠标悬停效果时遇uncaught TypeError错误，如何修复？

这个错误表示你的 background 变量值为 null，也就是 document.querySelector(".background") 没有找到目标DOM元素。最常见的原因是JavaScript代码在HTML元素加载完成前就执行了。

以下是几种可行的修复方案：

方案1：将脚本放在<body>末尾 #

把JavaScript代码移到HTML文档的<body>标签最后，确保所有DOM元素已加载完成后再执行代码：

<body>
  <div class="background"></div>
  <!-- 其他HTML内容 -->
  <script>
    let background = document.querySelector(".background")
    background.addEventListener('mouseover', event =>{
        event.target.style.background = "linear-gradient(-45deg,#012326,#1FBFA2,#0FF29F,#F2CE16,#D98E04)";
        event.target.style.backgroundSize = "2000% 2000%";
        event.target.style.animation = "animateBack 15s ease infinite";
    })
  </script>
</body>

方案2：使用DOMContentLoaded事件监听 #

通过监听DOMContentLoaded事件，让代码等待DOM完全解析完成后再执行：

document.addEventListener('DOMContentLoaded', () => {
    let background = document.querySelector(".background")
    background.addEventListener('mouseover', event =>{
        event.target.style.background = "linear-gradient(-45deg,#012326,#1FBFA2,#0FF29F,#F2CE16,#D98E04)";
        event.target.style.backgroundSize = "2000% 2000%";
        event.target.style.animation = "animateBack 15s ease infinite";
    })
});

方案3：给脚本标签添加defer属性 #

如果你的JavaScript是外部文件，在引入时添加defer属性，确保脚本在DOM解析完成后执行：

<script src="your-script-file.js" defer></script>

额外优化：添加元素存在性检查 #

为了避免意外报错，可以先检查元素是否存在再绑定事件：

let background = document.querySelector(".background")
if (background) {
    background.addEventListener('mouseover', event =>{
        event.target.style.background = "linear-gradient(-45deg,#012326,#1FBFA2,#0FF29F,#F2CE16,#D98E04)";
        event.target.style.backgroundSize = "2000% 2000%";
        event.target.style.animation = "animateBack 15s ease infinite";
    })
}

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