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>

推荐阅读