天天看點

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>

繼續閱讀