求助：点击按钮无法交替切换div背景色（lavenderblush与cyan）该如何修复？

这个问题挺常见的，核心原因就是你没跟踪当前元素的背景色状态——第一次点击你把颜色改成了目标色，但第二次点击时没判断当前是什么颜色，自然没法切回去。下面给你两种靠谱的解决思路：

思路1：用变量跟踪状态（推荐） #

这种方法不用依赖读取DOM的样式值，能避开浏览器对颜色值解析不一致的坑（比如有的浏览器会返回rgb(255,240,245)而不是你写的lavenderblush）。

// 先获取目标div和按钮元素
const targetDiv = document.getElementById('your-div-id');
const toggleBtn = document.getElementById('toggle-btn');

// 用变量记录当前是否是初始颜色
let isLavenderBlush = true;

toggleBtn.addEventListener('click', () => {
  if (isLavenderBlush) {
    targetDiv.style.backgroundColor = 'cyan';
  } else {
    targetDiv.style.backgroundColor = 'lavenderblush';
  }
  // 每次点击后切换状态
  isLavenderBlush = !isLavenderBlush;
});

思路2：读取当前样式值切换 #

如果你不想额外维护变量，也可以直接读取元素的计算样式来判断，但要注意浏览器返回的颜色格式——比如你设置的是lavenderblush，浏览器可能返回对应的RGB值：

const targetDiv = document.getElementById('your-div-id');
const toggleBtn = document.getElementById('toggle-btn');

toggleBtn.addEventListener('click', () => {
  // 获取当前元素最终生效的背景色
  const currentColor = window.getComputedStyle(targetDiv).backgroundColor;
  // 注意：lavenderblush对应的RGB是rgb(255, 240, 245)，cyan是rgb(0, 255, 255)
  if (currentColor === 'rgb(255, 240, 245)') {
    targetDiv.style.backgroundColor = 'cyan';
  } else {
    targetDiv.style.backgroundColor = 'lavenderblush';
  }
});

为什么你的原始代码会失效？ #

大概率是你的代码只判断了初始状态一次，比如类似这样的错误写法：

// 错误示例！
toggleBtn.addEventListener('click', () => {
  if (targetDiv.style.backgroundColor === 'lavenderblush') {
    targetDiv.style.backgroundColor = 'cyan';
  }
});

第一次点击后颜色变成cyan，但第二次点击时，targetDiv.style.backgroundColor是cyan，不会进入if分支，自然没有任何变化——这就是你遇到的问题。

总的来说，用变量跟踪状态的方式最稳妥，不管浏览器怎么解析颜色值，逻辑都不会出错。

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