快捷導(dǎo)航

JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例

更新時(shí)間：2017年10月19日 10:43:48 作者：spfLinux

這篇文章主要介紹了JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能,涉及js鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能。分享給大家供大家參考，具體如下：

先來(lái)看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn 點(diǎn)擊切換按鈕顏色</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ù)會(huì)節(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>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

QTreeWidget中MainWindow窗體中布局器不起作用詳解
本文主要介紹了QTreeWidget中MainWindow窗體中布局器不起作用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
javascript實(shí)現(xiàn)簡(jiǎn)單的html5視頻播放器
網(wǎng)頁(yè)視頻音頻播放器大家并不陌生，在IE中我們可以運(yùn)行ActiveX來(lái)嵌入微軟的Media Player或者其他的本地播放器，當(dāng)然可能大部分我們都是使用Flash來(lái)制作播放器。在HTML5發(fā)展迅速的今天，讓我們嘗試用HTML5來(lái)制作網(wǎng)頁(yè)播放器吧，畢竟無(wú)論是PC還是移動(dòng)設(shè)備，HTML5是未來(lái)的趨勢(shì)
2015-05-05
JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程
在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中,柯里化是一種將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實(shí)例的相關(guān)資料,需要的朋友可以參考下
2022-06-06
前端跨域的幾種解決方式總結(jié)（推薦）
這篇文章主要介紹了前端跨域的幾種解決方式，詳細(xì)介紹了同源策略并同時(shí)給出了跨域的五種解決方案，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08
JavaScript 空間坐標(biāo)的使用
這篇文章主要介紹了JavaScript 空間坐標(biāo)的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
JsonServer安裝及啟動(dòng)過(guò)程圖解
這篇文章主要介紹了JsonServer安裝及啟動(dòng)過(guò)程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
在SSM框架下用laypage和ajax實(shí)現(xiàn)分頁(yè)和數(shù)據(jù)交互的方法
今天小編大家分享一篇在SSM框架下用laypage和ajax實(shí)現(xiàn)分頁(yè)和數(shù)據(jù)交互的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JavaScript對(duì)象封裝的簡(jiǎn)單實(shí)現(xiàn)方法(3種方法)
這篇文章主要介紹了JavaScript對(duì)象封裝的簡(jiǎn)單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了3種簡(jiǎn)單實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-01-01
JavaScript中數(shù)組去重的辦法總結(jié)
你是否在面試的過(guò)程中被考到過(guò)給你一個(gè)數(shù)組讓你去掉重復(fù)項(xiàng)呢，下面小編就來(lái)總結(jié)一下對(duì)于數(shù)組去重這道簡(jiǎn)單的面試題時(shí)，我們可以回答的方法有什么吧
2023-06-06
頁(yè)面裝載js及性能分析方法介紹
這篇文章主要介紹了頁(yè)面裝載js及性能分析方法,需要的朋友可以參考下
2014-03-03