如何用JavaScript实现按钮点击切换背景色且新按钮点击时原按钮恢复原色？

问题背景 #

你有如下按钮组，初始所有按钮为颜色A（rgb(0, 174, 255)），需求是点击任意按钮时，该按钮切换为颜色B，同时其他按钮恢复为颜色A：

现有CSS代码

button {
        background-color: rgb(0, 174, 255);
        color: rgb(227, 72, 20);
        height: 30px;
        width: 30px;
        border-radius: 15px;
        font-size: 10px;
        margin-top: 85px;
        margin-left: auto;
        margin-right: auto;
        border-color: rgb(189, 227, 20);
        z-index: 20;
    }

现有HTML代码（注意：原代码中第四个按钮id重复为tp3，需修正为tp4）

<button class="btn" id="tp1" onclick="testpoint1()">TP1</button>
<button class="btn" id="tp2" onclick="testpoint2()">TP2</button>
<button class="btn" id="tp3" onclick="testpoint3()">TP3</button>
<button class="btn" id="tp4" onclick="testpoint4()">TP4</button>

实现方案（推荐用CSS类控制，样式行为分离） #

1. 修改CSS，添加高亮状态类

新增一个.active类来定义颜色B的样式，替换成你需要的颜色值即可：

button {
    background-color: rgb(0, 174, 255); /* 颜色A */
    color: rgb(227, 72, 20);
    height: 30px;
    width: 30px;
    border-radius: 15px;
    font-size: 10px;
    margin-top: 85px;
    margin-left: auto;
    margin-right: auto;
    border-color: rgb(189, 227, 20);
    z-index: 20;
    cursor: pointer; /* 优化交互体验 */
}

/* 颜色B的高亮状态 */
button.active {
    background-color: rgb(227, 72, 20); /* 示例颜色，可自定义 */
}

2. 优化HTML，统一绑定事件（推荐）

移除每个按钮单独的onclick函数，用批量绑定事件的方式，更简洁易维护：

<button class="btn" id="tp1">TP1</button>
<button class="btn" id="tp2">TP2</button>
<button class="btn" id="tp3">TP3</button>
<button class="btn" id="tp4">TP4</button>

3. 编写JavaScript逻辑

获取所有按钮，点击时先清空所有按钮的高亮状态，再给当前点击的按钮添加高亮：

const buttons = document.querySelectorAll('.btn');

buttons.forEach(btn => {
    btn.addEventListener('click', function() {
        // 移除所有按钮的active类
        buttons.forEach(item => item.classList.remove('active'));
        // 给当前按钮添加active类
        this.classList.add('active');
    });
});

兼容原有onclick结构的方案（不推荐，但可直接适配） #

如果必须保留原有onclick写法，可以写一个通用函数：

function activateButton(targetId) {
    // 清空所有按钮的高亮状态
    document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('active'));
    // 给目标按钮添加高亮
    document.getElementById(targetId).classList.add('active');
}

然后修改HTML的onclick属性：

<button class="btn" id="tp1" onclick="activateButton('tp1')">TP1</button>
<button class="btn" id="tp2" onclick="activateButton('tp2')">TP2</button>
<button class="btn" id="tp3" onclick="activateButton('tp3')">TP3</button>
<button class="btn" id="tp4" onclick="activateButton('tp4')">TP4</button>

注意事项 #

• 原HTML中第四个按钮的id重复为tp3，必须修正为唯一id（如tp4），否则getElementById只会获取第一个匹配的元素，导致第四个按钮点击无效。
• 使用CSS类控制样式而非直接操作style属性，便于后期修改颜色或样式，符合前端开发的分离原则。

内容的提问来源于stack exchange，提问作者Lê Huy Thanh