同一div背景色无法重复切换，用==时首次切换也失效，求解决办法

我明白你遇到的麻烦了——第一次切换能生效，但之后就卡壳，甚至改了==连第一次都不行。问题出在浏览器获取背景色的格式和你预期的不一样，还有初始样式的获取方式上，咱们一步步解决：

为什么你的代码失效？ #

当你用x.style.background（更准确的应该是x.style.backgroundColor）获取样式时，浏览器不会一直返回你写的"blue"字符串：

• 如果是内联设置的蓝色，浏览器可能返回对应的RGB值（比如rgb(0, 0, 255)）；
• 如果初始背景色是通过CSS类/样式表设置的，x.style.backgroundColor一开始是空字符串，导致你的判断完全不触发。

推荐解决方案：用类名切换（更规范易维护） #

这种方法把样式和JS逻辑分离，完全避开颜色值格式的坑：

1. 先在CSS里定义类：

/* 初始背景色 */
#box {
  background-color: blue;
}
/* 切换后的背景色类 */
.box-red {
  background-color: red;
}

2. 然后JS只需要切换这个类就行：

function toggleFunction() {
  const x = document.getElementById("box");
  x.classList.toggle("box-red");
}

点击的时候，toggle方法会自动添加/移除box-red类，完美实现循环切换。

如果一定要直接操作内联样式 #

如果你坚持要直接修改style属性，可以用getComputedStyle获取实际生效的样式，同时兼容颜色名和RGB格式：

function toggleFunction() {
  const x = document.getElementById("box");
  // 获取元素实际计算后的样式
  const currentBg = window.getComputedStyle(x).backgroundColor;
  
  // 同时判断颜色名和RGB值，覆盖不同浏览器的返回情况
  if (currentBg === "blue" || currentBg === "rgb(0, 0, 255)") {
    x.style.backgroundColor = "red";
  } else {
    x.style.backgroundColor = "blue";
  }
}

这样不管初始样式是怎么设置的，都能准确判断当前背景色，实现循环切换啦！

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