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 type="button" value="关灯" onclick="Switch()" />
35 </body>
36 </html>