javascript實現(xiàn)點擊按鈕變色

更新時間：2022年07月03日 11:25:59 作者：Favour72

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)點擊按鈕變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果如下:

代碼如下:

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

html部分

輸入我們所需要的按鈕個數(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得到的值是一個偽數(shù)組 ?,里面的每一個button元素都為btns[i]
?? ?// console.log(btns);
?? ?// 對數(shù)組進(jìn)行遍歷
?? ?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 = "";
?? ??? ??? ?}
?? ??? ??? ?//再把當(dāng)前元素的背景顏色添加上
?? ??? ??? ?this.style.backgroundColor = "pink";
?
?? ??? ?}
?? ?}
</script>

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

您可能感興趣的文章:

AngularJS實現(xiàn)按鈕提示與點擊變色效果

相關(guān)文章

利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見方法
這篇文章主要給大家介紹了關(guān)于利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見方法,其實有很多方法可以判斷數(shù)據(jù)是否是數(shù)組或字符串,需要的朋友可以參考下
2023-07-07
js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
這篇文章主要介紹了js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法,涉及javascript操作圖片實現(xiàn)輪播效果的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
2015-05-05
Javascript日期格式化format函數(shù)的使用方法
這篇文章主要介紹的是javascript時間格式format函數(shù)，我們有時候調(diào)用的new Date()不是格式化的時間，可能顯示不是很正常，那么這時候就需要格式化時間，今天這里分享一個javascript的foramt()函數(shù)，有需要的可以參考借鑒。
2016-08-08
FireBug 調(diào)試JS入門教程如何調(diào)試JS
這篇文章主要為大家介紹下通過firefox的FireBug調(diào)試JS，需要的朋友可以參考下
2013-12-12
解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題
今天小編就為大家分享一篇解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
淺析javascript中函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
這篇文章主要介紹了淺析javascript中函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別,需要的朋友可以參考下
2015-02-02
TypeScript 類型編程之索引類型遞歸去掉可選修飾
這篇文章主要介紹了TypeScript 類型編程之索引類型遞歸去掉可選修飾，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點的問題，在IE中nextSibling不會返回文本節(jié)點，而chrome或者firefox等會返回文本節(jié)點
2014-05-05
JavaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)
下面小編就為大家?guī)硪黄狫avaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
js實現(xiàn)簡單的秒表
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單的秒表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01