Uncaught TypeError读取undefined的style属性报错，JS游戏代码问题排查

报错Uncaught TypeError: Cannot read properties of undefined (reading 'style')触发自document.querySelector(".gif").getElementsByClassName("gif")[0].style.width="200px"代码行，核心原因是代码尝试访问undefined的style属性，具体问题分析和修复方法如下：

问题根因 #

• 选择器逻辑存在错误：代码先通过document.querySelector(".gif")获取页面第一个class为gif的元素，随后又在该元素的后代节点中二次查找class为gif的元素。除非DOM结构是.gif元素嵌套了另一个class为gif的子元素，否则getElementsByClassName("gif")返回的HTMLCollection为空，取索引[0]得到的就是undefined，访问undefined.style直接抛出错误。
• 补充排查点：如果确实存在嵌套的.gif元素，需确认document.querySelector(".gif")能否匹配到元素，若页面不存在对应class的元素，querySelector会返回null，调用null.getElementsByClassName也会抛出错误；不过根据报错提示是读取style属性时出错，说明问题优先出在[0]取到的是undefined。

修复方案 #

• 若要修改最外层.gif元素的宽度，直接删除多余的后代查找逻辑即可：

document.querySelector(".gif").style.width="200px"

• 若要修改.gif元素内部的gif图片（如img标签），将查找条件替换为对应标签名或正确的class即可，示例：

document.querySelector(".gif img").style.width="200px"

• 可添加非空判断提升代码健壮性，避免DOM未加载完成时找不到元素触发报错：

const targetGif = document.querySelector(".gif") // 替换为你的正确选择器
if (targetGif) {
  targetGif.style.width = "200px"
}

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