JavaScript如何实现点击同一按钮交替切换背景为绿色与白色

你目前的代码只实现了点击设置为绿色的逻辑，没有增加状态判断实现切换效果，同时原有代码中的rgb值缺少右括号，会触发语法报错，可按以下两种方案修改：

方案1：使用class切换（推荐） #

样式和逻辑分离，后续维护更方便，兼容性和稳定性更高：

1. 先定义对应的样式类

.green-bg {
  background: rgb(24, 189, 24);
  color: #fff;
}

2. 修改JS逻辑，用classList的toggle方法自动切换类

spanTwo.addEventListener('click', () => {
  liItem.classList.toggle('green-bg');
})

toggle方法会自动检测元素是否存在该类，存在就移除，不存在就添加，刚好匹配你需要的二次点击切换回原状态的需求。

方案2：直接通过style属性判断实现 #

如果不想额外写CSS，也可以直接判断当前样式实现切换：

spanTwo.addEventListener('click', () => {
  const isGreen = liItem.style.backgroundColor === 'rgb(24, 189, 24)';
  if (isGreen) {
    // 切换回默认白色背景
    liItem.style.background = '#fff';
    liItem.style.color = '#000';
  } else {
    // 切换为绿色背景
    liItem.style.background = 'rgb(24, 189, 24)';
    liItem.style.color = '#fff';
  }
})

注意：直接判断颜色值可能存在浏览器兼容问题，部分浏览器会返回十六进制格式的颜色值导致判断失效，优先推荐方案1

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