Loading

利用JavaScript来切换样式表

 

切换样式表

  1. html页

     

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml"> 
 4 
 5 <head> 
 6 
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 8 
 9 <title>样式表切换</title> 
10 
11 <link href="css/default.css" type="text/css" rel="stylesheet" rev="stylesheet" title="default" /> 
12 
13 <link href="css/alternate.css" type="text/css" rel="alternate stylesheet" rev="alternate" title="alternate" /> 
14 
15 <script src="javascript/样式切换.js" type="text/javascript" language="javascript"> 
16 
17 </script> 
18 
19 </head> 
20 
21  
22 
23 <body> 
24 
25 <!—设置样式表表为默认样式表 --> 
26 
27 <input type="button" value="style1" onclick="setActiveStyleSheet('default');" /> 
28 
29 <!--设置样式表表为可选样式表 --> 
30 
31 <input type="button" value="style2" onclick="setActiveStyleSheet('alternate');" /> 
32 
33 <!—获取当前样式表的对应 title --> 
34 
35 <input type="button" value="get stylesheet" onclick="getActiveStyleSheet('alternate');" /> 
36 
37  
38 
39 </body> 
40 
41 </html>
    Html代码

     

     

     

  2. default.css

     

    1 body 
2 
3 { 
4 
5     background-color:green; 
6 
7 }

     

alternate.css

 

1 body 
2 { 
3     background-color:blue; 
4 }

 

样式切换.js 
 1 // JavaScript Document 
 2 
 3 function setActiveStyleSheet(title) { 
 4 
 5 var i, a; 
 6 
 7 if (title) 
 8 
 9  { 
10 
11     for(i=0; (a = document.getElementsByTagName('link')[i]); i++) 
12 
13     { 
14 
15         if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) 
16 
17          { 
18 
19             a.disabled = true; 
20 
21             if(a.getAttribute('title') == title) 
22 
23             a.disabled = false; 
24 
25         } 
26 
27     } 
28 
29  } 
30 
31 } 
32 
33 function getActiveStyleSheet() { 
34 
35 var i, a; 
36 
37 for(i=0; (a = document.getElementsByTagName('link')[i]); i++) { 
38 
39 if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) alert(a.getAttribute('title')); 
40 
41 } 
42 
43 }

 

posted @ 2014-03-18 12:51  WeihanLi  阅读(528)  评论(0)  编辑  收藏  举报