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 >

 

转载于:https://www.cnblogs.com/zhuiyi/archive/2011/04/23/2025887.html