点击一个按钮之后该按钮颜色变量两一个按钮颜色变灰

最新推荐文章于 2022-11-29 17:55:19 发布

原创最新推荐文章于 2022-11-29 17:55:19 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");