使用变量而非字符串时无法修改元素ID对应的图片src

问题分析 #

报错Cannot set properties of null (setting 'src')说明document.getElementById(a)返回了null——也就是函数执行时找不到ID为layerAddButton的元素，但你硬编码能正常运行，说明元素本身存在，只是函数调用的某个环节出了问题。

大概率的原因及解决方案 #

1. 传递的ID参数存在隐形空格

有时候复制粘贴或输入的ID会带前后空格，console.log可能看不出来，但getElementById是严格匹配的。可以在函数里先对ID做去空格处理：

function swapImg(id, url) {
  const cleanId = id.trim(); // 去除前后空格
  const imgElement = document.getElementById(cleanId);
  if (imgElement) {
    imgElement.src = url;
  } else {
    console.error(`找不到ID为"${cleanId}"的元素（原始ID："${id}"）`);
  }
}

2. 函数执行时元素已被移除

如果onmouseleave触发时，刚好有其他代码（比如弹窗关闭、DOM动态更新）把layerAddButton元素移除了，那自然找不到。可以加判断避免报错，同时排查触发事件时的DOM状态：

function swapImg(id, url) {
  const imgElement = document.getElementById(id);
  if (imgElement) {
    imgElement.src = url;
  } else {
    console.log(`当前DOM中无ID为"${id}"的元素`);
    // 可选：打印当前所有带ID的元素，方便排查
    // console.log([...document.querySelectorAll('[id]')].map(el => el.id));
  }
}

3. 误传了元素对象而非ID字符串

如果调用函数时，你传的是元素本身（比如swapImg(layerAddButton, 'xxx')而不是swapImg('layerAddButton', 'xxx')），那id参数是DOM元素对象，getElementById会去查找ID为[object HTMLImageElement]的元素，肯定找不到。这种情况要确保调用时传的是带引号的字符串ID：

<!-- 正确调用方式 -->
<button onmouseleave="swapImg('layerAddButton', 'images/layerAdd-blue.svg')">...</button>

调试小技巧 #

在函数里加两行打印，直观确认参数和元素状态：

function swapImg(id, url) {
  console.log('当前ID参数:', id, '类型:', typeof id);
  console.log('查找的元素:', document.getElementById(id));
  // 后续代码...
}

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