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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。