原生JavaScript检测CSS backgroundColor实现点击切换颜色失效问题求解

问题根因 #

你的原生JS代码存在时序逻辑错误：getComputedStyle的颜色判断是绑定点击事件时就执行，而非每次点击触发时才判断。页面初始状态下所有.light都是灰色，所以所有元素都只会绑定「点击设为蓝色」的事件，自然不可能切回灰色。

最简原生JS实现方案 #

document.querySelectorAll('.light').forEach(light => {
  light.addEventListener('click', () => {
    // 每次点击时再判断当前实际背景色
    const currentBg = getComputedStyle(light).backgroundColor;
    light.style.backgroundColor = currentBg === 'rgb(128, 128, 128)' ? 'blue' : 'grey';
  })
})

更稳定的替代方案（无颜色判断兼容问题） #

直接通过CSS类切换实现，避免不同浏览器颜色返回格式不一致（比如部分场景会返回十六进制、rgba值、gray字符串等，导致判断失效）：

1. 先定义CSS样式

.light { background: grey; }
.light.is-active { background: blue; }

2. JS逻辑

document.querySelectorAll('.light').forEach(light => {
  light.addEventListener('click', () => light.classList.toggle('is-active'))
})

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