使用JavaScript/jQuery修改选中按钮背景颜色问题求助

你的代码无法修改按钮颜色的核心原因是：$(this).attr("id")获取到的是字符串类型的按钮ID，而非按钮对应的DOM元素对象，字符串没有style属性，因此执行selected.style.backgroundColor="red"会直接报错。

下面给你几种简单的修复方案：

方案1：直接用jQuery的css()方法（最简洁） #

既然已经在用jQuery，直接调用它的css()方法就能快速修改样式：

$(".btn").click(function () {
    $(this).css("background-color", "red");
});

方案2：用原生DOM元素操作 #

在jQuery的事件回调里，this本身就是触发点击事件的原生按钮DOM元素，直接用它设置样式即可：

$(".btn").click(function () {
    this.style.backgroundColor = "red";
});

方案3：通过ID获取DOM元素（符合你原本的思路） #

如果你一定要通过ID来获取元素，需要把ID字符串传入document.getElementById()拿到真正的DOM对象：

$(".btn").click(function () {
    var selectedId = $(this).attr("id");
    var selectedBtn = document.getElementById(selectedId);
    selectedBtn.style.backgroundColor = "red";
});

额外优化：单选高亮（可选） #

如果希望每次只有当前选中的按钮是红色，之前选中的恢复默认样式，可以先重置所有按钮的背景色：

$(".btn").click(function () {
    // 重置所有按钮的背景色为默认值
    $(".btn").css("background-color", "");
    // 设置当前点击的按钮为红色
    $(this).css("background-color", "red");
});

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