如何使用JavaScript点击图片时将光标改为自定义图像

Hey，我来帮你搞定这个问题！首先你看到的Uncaught TypeError: Cannot read property 'style' of null错误，本质是代码找不到pageCombatAlien这个DOM元素——document.getElementById("pageCombatAlien")返回了null，自然没法访问它的style属性。

第一步：排查元素找不到的核心原因 #

我们先一步步定位问题：

1. 先确认元素是否真的存在于DOM中
   在你的changeCursorGun函数里加一行日志，看看元素到底能不能被找到：

   function changeCursorGun(){
     const combatPage = document.getElementById("pageCombatAlien");
     console.log("找到的元素：", combatPage); // 查看控制台输出
     if (combatPage) {
       // 后续设置光标的代码
     } else {
       console.error("糟了，找不到#pageCombatAlien元素！");
     }
   }
   

   点击按钮后看控制台：

   • 如果输出null：说明元素确实没被找到，大概率是这几个原因：
     • ID拼写错误：检查HTML里的id="pageCombatAlien"和函数里的字符串是否完全一致（大小写、拼写都要丝毫不差！）
     • 元素被动态移除：有没有其他代码在点击按钮前把这个div删掉了？
     • 重复的ID：页面里是不是有多个元素用了pageCombatAlien这个ID？ID必须是唯一的，getElementById只会返回第一个匹配的元素。
   • 如果输出了DOM元素：那问题就出在光标设置的语法上，直接看下一步。

2. 修复光标设置的语法问题
   就算找到了元素，你的光标代码还有个小问题：自定义光标必须指定完整的文件名（包括后缀，比如.png、.cur），还要加一个回退光标，避免图片加载失败时光标异常：

   combatPage.style.cursor = "url('images/gunCursor.png'), auto";
   

   额外注意：

   • 确保图片路径正确：比如images/gunCursor.png是相对于HTML文件的路径，你可以直接在浏览器地址栏输入这个路径，看看能不能打开图片。
   • 图片尺寸别太大：自定义光标建议用32x32或64x64的图片，太大的话浏览器可能会忽略这个设置。

完整修复后的代码 #

把这些调整整合起来，你的代码应该变成这样：

JavaScript #

function changeCursorGun(){
  const combatPage = document.getElementById("pageCombatAlien");
  if (!combatPage) {
    console.error("无法找到#pageCombatAlien元素，请检查ID或元素是否存在");
    return;
  }
  // 正确设置自定义光标，记得替换成你的图片后缀
  combatPage.style.cursor = "url('images/gunCursor.png'), auto";
}

额外提示 #

如果你的pageCombatAlien一开始是display: none的，别担心——display: none只是隐藏元素，它依然存在于DOM中，getElementById还是能找到它的。只要你在点击按钮前已经把它显示出来了（比如通过其他函数设置style.display = "block"），就没问题。

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