javascript实现点击按钮变色

本文实例为大家分享了javascript实现点击按钮变色的具体代码，供大家参考，具体内容如下

效果如下:

代码如下:

在这个案例中主要用到的是排他思想

html部分

输入我们所需要的按钮个数

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

css部分

<style type="text/css">
?? ??? ??? ?button {
?? ??? ??? ??? ?border: 1px solid cornflowerblue;
?? ??? ??? ??? ?border-radius: 3px;
?? ??? ??? ??? ?margin-left: 14px;
?? ??? ??? ?}
</style>

script部分

<script type="text/javascript">
?? ?//获取所有按钮元素
?? ?var btns = document.getElementsByTagName("button");
?? ?//btns得到的值是一个伪数组 ?,里面的每一个button元素都为btns[i]
?? ?// console.log(btns);
?? ?// 对数组进行遍历
?? ?for (var i = 0; i < btns.length; i++) {
?? ??? ?//给每一个button按钮绑定点击事件
?? ??? ?btns[i].onclick = function () {
?? ??? ??? ?// 先把所有的颜色全部清空
?? ??? ??? ?for (var i = 0; i < btns.length; i++) {
?? ??? ??? ??? ?btns[i].style.backgroundColor = "";
?? ??? ??? ?}
?? ??? ??? ?//再把当前元素的背景颜色添加上
?? ??? ??? ?this.style.backgroundColor = "pink";
?
?? ??? ?}
?? ?}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于javascript实现点击按钮变色的详细内容...