如何解决JavaScript按钮切换图片后图片偏移的问题？

问题根源分析 #

1. JS逻辑隐患：判断条件误用赋值运算符=而非比较运算符===，虽然当前功能看似运行，但逻辑不符合预期，每次调用函数都会强制执行赋值操作。
2. 布局冲突与图片差异：
   • 两张灯泡图片原始宽高比不一致，切换时容器的固定宽高设置会导致图片拉伸/压缩比例不同，引发位置偏移。
   • 容器同时使用position: fixed+left: 650px和margin: auto，两种定位逻辑冲突，固定left值在不同屏幕下会导致位置异常；且图片未设置对齐样式，切换时基线对齐变化也会引发偏移。

修复步骤 #

1. 修正JS逻辑错误 #

将判断里的=改为===，同时注意src获取的是完整URL，用endsWith()判断文件名更可靠：

function bulbon() {
  const bulb = document.getElementById("lightbulb");
  if (bulb.src.endsWith("mini_mini_pngwing.com.png")) {
    bulb.src = "mini_lightbulbon.png";
  }
}

function bulboff() {
  const bulb = document.getElementById("lightbulb");
  if (bulb.src.endsWith("mini_lightbulbon.png")) {
    bulb.src = "mini_mini_pngwing.com.png";
  }
}

2. 统一图片布局，消除偏移 #

修改CSS，让容器自适应居中，同时强制图片在容器内保持一致的显示方式：

.lightbulb {
  position: fixed;
  /* 用transform实现自适应居中，替代固定left值 */
  left: 50%;
  top: 125px;
  transform: translateX(-50%);
  /* 固定容器尺寸，避免图片切换时容器变化 */
  width: 400px; /* 可替换为你需要的固定宽度 */
  height: auto;
}

#lightbulb {
  /* 让图片填满容器，保持宽高比 */
  width: 100%;
  height: auto;
  /* 消除inline元素的基线间隙 */
  display: block;
}

3. 可选：从根源解决图片差异 #

提前将两张灯泡图片裁剪为完全相同的宽高尺寸，彻底避免因图片本身尺寸差异导致的布局偏移。

最终效果 #

修改后，切换图片时容器位置固定，图片按比例填满容器，不会出现偏移，同时JS逻辑更严谨。

内容的提问来源于stack exchange，提问作者Danilo Trojanović