使用window.getComputedStyle切换背景图函数失效，求排查原因

嘿，我来帮你搞定这个背景切换的问题～你的代码没法正常运行，核心原因出在依赖getComputedStyle返回的background-image值做严格判断上，这坑可不小：

浏览器返回的计算后样式格式并不统一——比如有的会把相对路径转成绝对URL（像url("http://你的域名/strawberry.png")），有的用双引号代替单引号，甚至有的根本不带引号。这就导致你写的bstyle == "url('strawberry.png')"这种严格相等的判断永远不成立，自然触发不了切换逻辑。

给你两种靠谱的修复方案：

方案一：用计数器跟踪切换状态（推荐） #

这种方式完全避开浏览器样式格式的差异，逻辑清晰又稳定：

// 在函数外部定义计数器和背景图数组，保存状态
let currentBgIndex = 0;
const backgroundImages = ['strawberry.png', 'raspberry.png', 'blueberry.png'];

function changeBackground() {
  console.log('change background');
  const mainBody = document.getElementById('mainbody');
  
  // 更新索引，取模实现循环
  currentBgIndex = (currentBgIndex + 1) % backgroundImages.length;
  // 设置新背景图
  mainBody.style.backgroundImage = `url('${backgroundImages[currentBgIndex]}')`;
}

原理很简单：用数组存好所有要切换的背景图，每次点击按钮就把计数器加1，通过取模运算让索引在数组长度内循环，直接设置对应的背景图就行。

方案二：模糊匹配图片文件名（兼容原有逻辑） #

如果你想保留基于当前背景图判断的逻辑，可以用includes()方法模糊匹配文件名，代替严格相等判断：

function changeBackground() {
  console.log('change background');
  const mainBody = document.getElementById('mainbody');
  const currentBg = window.getComputedStyle(mainBody, null).getPropertyValue('background-image');
  
  if (currentBg.includes('strawberry.png')) {
    mainBody.style.backgroundImage = "url('raspberry.png')";
  } else if (currentBg.includes('raspberry.png')) {
    mainBody.style.backgroundImage = "url('blueberry.png')";
  } else {
    // 默认切回第一张
    mainBody.style.backgroundImage = "url('strawberry.png')";
  }
}

不过这种方式还是有潜在风险——如果你的项目里有重名的图片文件，可能会判断出错，所以还是优先推荐方案一。

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