欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色

 更新時(shí)間：2022年07月03日 11:25:59   作者：Favour72  
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色的具體代碼，供大家參考，具體內(nèi)容如下

效果如下:

代碼如下:

在這個(gè)案例中主要用到的是排他思想

html部分

輸入我們所需要的按鈕個(gè)數(shù)

<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得到的值是一個(gè)偽數(shù)組 ?,里面的每一個(gè)button元素都為btns[i]
?? ?// console.log(btns);
?? ?// 對(duì)數(shù)組進(jìn)行遍歷
?? ?for (var i = 0; i < btns.length; i++) {
?? ??? ?//給每一個(gè)button按鈕綁定點(diǎn)擊事件
?? ??? ?btns[i].onclick = function () {
?? ??? ??? ?// 先把所有的顏色全部清空
?? ??? ??? ?for (var i = 0; i < btns.length; i++) {
?? ??? ??? ??? ?btns[i].style.backgroundColor = "";
?? ??? ??? ?}
?? ??? ??? ?//再把當(dāng)前元素的背景顏色添加上
?? ??? ??? ?this.style.backgroundColor = "pink";
?
?? ??? ?}
?? ?}
</script>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論