如何使用HTML和JavaScript实现点击按钮切换背景色的功能

• 推荐使用样式类切换的方案实现，逻辑和样式解耦，维护性更高。

完整实现代码 #

1. HTML结构 #

<button id="statusBtn">交互按钮</button>

2. CSS样式 #

#statusBtn {
  /* 基础样式 */
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s linear;
  /* 默认浅绿色状态 */
  background-color: lightgreen;
  color: #222;
}

/* 激活状态深绿色 */
#statusBtn.is-active {
  background-color: darkgreen;
  color: #fff;
}

3. JavaScript交互逻辑 #

如果只需要切换状态，直接用classList.toggle即可：

const statusBtn = document.querySelector('#statusBtn');

// 绑定点击事件
statusBtn.addEventListener('click', function() {
  // 自动切换激活类：存在就移除，不存在就添加
  this.classList.toggle('is-active');
});

如果切换状态同时还要执行其他自定义逻辑，可以手动判断状态分支：

const statusBtn = document.querySelector('#statusBtn');

statusBtn.addEventListener('click', function() {
  const isActive = this.classList.contains('is-active');
  if (isActive) {
    // 取消激活逻辑
    this.classList.remove('is-active');
    // 此处可补充取消激活时需要执行的其他代码
  } else {
    // 激活逻辑
    this.classList.add('is-active');
    // 此处可补充激活时需要执行的其他代码
  }
});

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