JS實(shí)現(xiàn)按鈕顏色切換效果
更新時(shí)間：2020年09月05日 09:27:34 作者：spfLinux
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)按鈕顏色切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了使用參數(shù)函數(shù)實(shí)現(xiàn)按鈕顏色切換的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1" onclick="btn(1)">按鈕1</button>
<button id="btn2" onclick="btn(2)">按鈕2</button>
<button id="btn3" onclick="btn(3)">按鈕3</button>
<script>
//設(shè)置背景顏色
//如果設(shè)置參數(shù)函數(shù)會節(jié)省函數(shù)數(shù)量吧
//設(shè)置flag+參數(shù)函數(shù)
flag = "btn1";
function btn1(){
document.getElementById("btn2").style.color = "black";
document.getElementById("btn3").style.color = "black";
document.getElementById("btn1").style.color = "red";
}
function btn2(){
document.getElementById("btn1").style.color = "black";
document.getElementById("btn2").style.color = "red";
document.getElementById("btn3").style.color = "black";
}
function btn3(){
document.getElementById("btn1").style.color = "black";
document.getElementById("btn2").style.color = "black";
document.getElementById("btn3").style.color = "red";
}
function btn(num){
if(num == 1){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn1").style.color = "red";
document.getElementById("btn1").style.backgroundColor = "blue";
flag = "btn1";
}
if(num == 2){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn2").style.color = "red";
document.getElementById("btn2").style.backgroundColor = "blue";
flag = "btn2";
}
if(num == 3){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn3").style.color = "red";
document.getElementById("btn3").style.backgroundColor = "blue";
flag = "btn3";
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成可拖動的不同顏色塊示例
- JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例
- Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
- js實(shí)現(xiàn)按鈕顏色漸變動畫效果
- js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法
- JS控制按鈕自動切換背景顏色(可暫停)
- 用javascript實(shí)現(xiàn)改變TEXTAREA滾動條和按鈕的顏色，以及怎樣讓滾動條變得扁平
- js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色
相關(guān)文章
這篇文章主要介紹了微信小程序使用車牌號輸入法的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文主要介紹了基本DOM節(jié)點(diǎn)操作，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
在web開發(fā)中我們經(jīng)常各種各樣的需求。今天小編給大家介紹JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉標(biāo)簽頁，非常實(shí)用，感興趣的童鞋參考下吧2016-04-04
本文主要介紹了js中hasOwnProperty()方法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Swiper是移動端的一款非常強(qiáng)大的觸摸滑動插件。下面通過本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧2017-08-08
20多個(gè)小事例帶你重溫ES10新特性(小結(jié))
這篇文章主要介紹了20多個(gè)小事例帶你重溫ES10新特性(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript詳細(xì)分析數(shù)據(jù)類型和運(yùn)算符
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和運(yùn)算符案例,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)類型和運(yùn)算符特性與相關(guān)操作技巧,需要的朋友可以參考下2022-07-07
小程序怎樣讓wx.navigateBack更好用的方法實(shí)現(xiàn)
這篇文章主要介紹了小程序怎樣讓wx.navigateBack更好用的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動折疊隱藏）
這篇文章主要介紹了BootStrap實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式布局，當(dāng)在小屏幕、手機(jī)屏幕瀏覽時(shí)自動折疊隱藏的效果，非常不錯(cuò)，具有參考借鑒價(jià)值,對bootstrap 響應(yīng)式布局導(dǎo)航欄功能感興趣的朋友一起學(xué)習(xí)吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家什么是js注入，如何進(jìn)行js注入攻防，感興趣的小伙伴們可以參考一下2016-09-09