本文實例講述了JS/jQuery實現簡單的開關燈效果。分享給大家供大家參考，具體如下：
實現效果:
html結構只有兩個button標簽
<button id="left">開燈</button><button id="right">關燈</button>
方法一:用原生js來做
<script> //1.獲取頁面元素 var left=document.getElementById('left'); var right=document.getElementById('right'); //注意獲取body的方式有兩種 //第一種:直接使用document的點語法 //var body1=document.body; // console.log ( body1 ) //第二種:通過標簽名來獲取,但要注意去標簽名后要添加下標,因為用標簽名獲取的是數組 var body=document.getElementsByTagName('body')[0]//因為通過標簽名獲取的是數組,一定要求取下標才可以 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.關燈 buttons[ 1 ].onclick=function ( ) { $('body').css('backgroundColor','black'); }} )</script>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
