本文通过一个实例说明JS/jQuery可以实现简单的开灯关灯效果。分享给大家参考，如下：

达到效果：

html结构中只有两个按钮标签

按钮id='left '开灯/按钮id=' right '关灯/按钮方法1 :是用原生js完成的

脚本//1。获取page元素varleft=document . getelementbyid(' left ')；var right=document . getelementbyid(' right ')；//注意，有两种方法可以获得body。//第一种方式是直接使用文档的点语法。//var body 1=document . body；//console.log (body1) //第二个：是通过标记名得到的，但是要注意在标记名去掉后加上下标，因为数组varbody=document . getelementsbytagname(' body ')[0]//是通过标记名得到的。必须在console.log (body) //2之前移除bid。注册事件left . onclick=function(){ body . style . background color=' white '；} right . onclick=function(){ body . style . background COlOr=' black '；}/script方法2 :是用JQuery完成的

script $(function(){//get buttons var buttons=$(' button ')；//2.打开灯$(按钮[0])。单击(function () {$ ('body ')。CSS('背景色'，'白色')；})//$(“body”)。CSS('背景色'，'白色')//3。关闭灯按钮[1]。onclick=function () {$ ('body ')。CSS('背景色'，'黑色')；} })/脚本感兴趣的朋友可以使用网上的HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试一下上面代码的运行效果。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》和0103010

希望本文对JavaScript编程有所帮助。