jQuery 3.6.0点击切换按钮背景色仅能变绿无法变蓝问题

浏览器对style.backgroundColor属性的返回值做了自动格式转换：当你写入命名颜色Green后，读取该属性得到的不是你写入的颜色名字符串，而是标准RGB格式值rgb(0, 128, 0)。你的判断逻辑里用属性返回值和字符串"Green"做相等比较，永远会返回false，所以第一次点击设置为绿色后，后续所有点击都不会触发else分支的蓝色设置逻辑。

你可以根据需求任选以下实现方式：

• 方案1：直接和RGB格式值做判断，适配现有写法

$("#bgcolor").click(() => {
  const btn = document.getElementById("bgcolor")
  if (btn.style.backgroundColor !== "rgb(0, 128, 0)") {
    btn.style.backgroundColor = "Green"
  } else {
    btn.style.backgroundColor = "Blue"
  }
})

• 方案2：用自定义属性标记状态，不受浏览器颜色格式差异影响

$("#bgcolor").click(() => {
  const btn = document.getElementById("bgcolor")
  const isGreen = btn.dataset.isGreen === 'true'
  btn.style.backgroundColor = isGreen ? "Blue" : "Green"
  btn.dataset.isGreen = String(!isGreen)
})

• 方案3：通过类名切换控制样式，是前端实现同类需求的通用最优解
  先定义CSS样式：

.bg-green {
  background-color: Green;
}
.bg-blue {
  background-color: Blue;
}

JS逻辑只负责类名切换：

$("#bgcolor").click(() => {
  const $btn = $("#bgcolor")
  $btn.toggleClass('bg-green bg-blue')
})

内容的提问来源于stack exchange，提问作者Hưng Nguyễn