点击一个按钮之后该按钮颜色变量两一个按钮颜色变灰_几个按钮点击一个后另外几个显示灰色-优快云博客

本文链接：https://blog.youkuaiyun.com/LuckFairyLuckBaby/article/details/89184769

本文详细介绍了如何使用JavaScript来修改、添加和删除HTML元素的class属性，包括通过getElementById和setAttribute方法实现的具体代码示例。

1.更改按钮的class属性

document.getElementById("tr").className = "newclass";//styleclass为新的属性值
document.getElementById("tr").setAttribute("class","newclass");

2.添加新的class属性

var obj = document.getElementById('id');
obj.className += ' newclass'; // 注意前面加空格，防止两个属性挨一起

3.移除一个class属性

$("#id").removeClass("newclass");

实例

代码实现

 <button type="button" id="trading_pie_order_amount" class="btn btn-info btn-xs" onclick="BussnissIndex.changeTradingPieOrderAmount()">订单金额</button>|<button type="button" id="trading_pie_order_total" class="btn btn-default btn-xs" onclick="BussnissIndex.changeTradingPieOrderTotal()">订单数量</button>

//点击订单金额按钮之后改变订单数量的按钮颜色变灰
    document.getElementById("trading_pie_order_total").setAttribute("class","btn btn-default btn-xs");
    //确保自身有颜色
    document.getElementById("trading_pie_order_amount").setAttribute("class","btn btn-info btn-xs");

 //点击订单数量按钮之后改变订单金额的按钮颜色变灰
    document.getElementById("trading_pie_order_amount").setAttribute("class","btn btn-default btn-xs");
    //确保自身有颜色
    document.getElementById("trading_pie_order_total").setAttribute("class","btn btn-info btn-xs");