模拟某些网站的开关灯案例

最新推荐文章于 2024-04-15 08:33:14 发布

灵雨飘零

最新推荐文章于 2024-04-15 08:33:14 发布

阅读量1.4k

点赞数

分类专栏：技术文档文章标签： button function xhtml html input css

本文链接：https://blog.csdn.net/kingboy2008/article/details/7331319

版权

技术文档专栏收录该内容

102 篇文章 0 订阅

订阅专栏

原理简介: 利用鼠标的单击onclick事件触发上面的JS开关灯函数通过改变网页背景的css样式达到改变html背景颜色的效果

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <style type="text/css">
         .dark
         {
             background-color: Black;
         }
         .bright
         {
             background-color: White;
         }
    </style>
    <script type="text/javascript">
          function switch_on() {    //函数开灯
             document.body.className = "bright";  //调用样式表中的.bright 背景样式,使网页背景变亮
         }
          function switch_off() {   //函数关灯
             document.body.className = "dark"; //调用样式表中的.dark 背景样式,使网页背景变黑
         }    
    </script>
 </head>
 <body>
     <input type="button" value="开灯" οnclick="switch_on()" />
     <input type="button" value="关灯" οnclick="switch_off()" />
 </body>
 </html>

灵雨飘零

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
模拟某些网站的开关灯案例

原理简介: 利用鼠标的单击onclick事件触发上面的JS开关灯函数通过改变网页背景的css样式达到改变html背景颜色的效果代码: .dark { background-color: Black; } .bright
复制链接

扫一扫