Js实现动态更改Css样式之土豆网开/关灯效果！

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4     <title>开关灯效果</title>
5     <style type="text/css">
6         body
7         {
8             background: #FFF;
9         }
10         .day
11         {
12             background: #000;
13         }
14         .night
15         {
16             background: #FFF;
17         }
18     </style>
19     <script language="javascript" type="text/javascript">
20         function Switch() {
21             var btnSwitch = document.getElementById("btnSwitch");
22             var type = document.body.className;
23             if (type == "day") {
24                 document.body.className = "night";
25                 btnSwitch.value = "关灯";
26             } else {
27                 document.body.className = "day";
28                 btnSwitch.value = "开灯";
29             }
30         }
31     </script>
32 </head>
33 <body>
34     <input id="btnSwitch" type="button" value="关灯" onclick="Switch()" />
35 </body>
36 </html>