javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色
本文實(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)文章
微信公眾號(hào)開發(fā) 實(shí)現(xiàn)點(diǎn)擊返回按鈕就返回到聊天界面
本文分享了微信公眾號(hào)開發(fā)實(shí)現(xiàn)點(diǎn)擊返回按鈕就返回到聊天界面的示例代碼。需要的朋友一起來看下吧2016-12-12ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法分析
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法,結(jié)合實(shí)例形式簡單分析了Set與WeakSet的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分與展示
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分與展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解
這篇文章主要介紹了bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹
這篇文章主要介紹了Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹,本文講解了什么是短路表達(dá)式,并給出了一些示例,需要的朋友可以參考下2015-03-03JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能分析
這篇文章主要介紹了JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了JS基于正則表達(dá)式的表單驗(yàn)證功能原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04