欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年02月19日 10:11:29   作者：庚中  
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開關(guān)燈效果,結(jié)合具體實(shí)例形式分析了javascript/jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

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

實(shí)現(xiàn)效果:

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

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

方法一:用原生js來做

<script>
  //1.獲取頁(yè)面元素
  var left=document.getElementById('left');
  var right=document.getElementById('right');
  //注意獲取body的方式有兩種
  //第一種:直接使用document的點(diǎn)語(yǔ)法
  //var body1=document.body;
  // console.log ( body1 )
  //第二種:通過標(biāo)簽名來獲取,但要注意去標(biāo)簽名后要添加下標(biāo),因?yàn)橛脴?biāo)簽名獲取的是數(shù)組
  var body=document.getElementsByTagName('body')[0]//因?yàn)橥ㄟ^標(biāo)簽名獲取的是數(shù)組,一定要求取下標(biāo)才可以
  console.log ( body )
  //2.注冊(cè)事件
  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測(cè)試上述代碼運(yùn)行效果。

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

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

相關(guān)文章

最新評(píng)論