快捷導(dǎo)航

JS/jQuery實現(xiàn)簡單的開關(guān)燈效果【案例】

更新時間：2019年02月19日 10:11:29 作者：庚中

這篇文章主要介紹了JS/jQuery實現(xiàn)簡單的開關(guān)燈效果,結(jié)合具體實例形式分析了javascript/jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS/jQuery實現(xiàn)簡單的開關(guān)燈效果。分享給大家供大家參考，具體如下：

實現(xiàn)效果:

html結(jié)構(gòu)只有兩個button標(biāo)簽

<button id="left">開燈</button>
<button id="right">關(guān)燈</button>

方法一:用原生js來做

<script>
  //1.獲取頁面元素
  var left=document.getElementById('left');
  var right=document.getElementById('right');
  //注意獲取body的方式有兩種
  //第一種:直接使用document的點語法
  //var body1=document.body;
  // console.log ( body1 )
  //第二種:通過標(biāo)簽名來獲取,但要注意去標(biāo)簽名后要添加下標(biāo),因為用標(biāo)簽名獲取的是數(shù)組
  var body=document.getElementsByTagName('body')[0]//因為通過標(biāo)簽名獲取的是數(shù)組,一定要求取下標(biāo)才可以
  console.log ( body )
  //2.注冊事件
  left.onclick=function ( ) {
    body.style.backgroundColor="white";
  }
  right.onclick=function ( ) {
   body.style.backgroundColor = "black";
  }
</script>

方法二:用JQuery來做

<script>
$ ( function () {
 //獲取按鈕們
 var buttons=$('button');
 //2.開燈
 $ (buttons[ 0 ]).click(function () {
   $('body').css("backgroundColor",'white');
 })
 // $ ( 'body' ).css('backgroundColor','white')
 //3.關(guān)燈
 buttons[ 1 ].onclick=function ( ) {
   $('body').css('backgroundColor','black');
 }
} )
</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

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

您可能感興趣的文章: