利用JavaScript来切换样式表

前端开发作者： 2024-08-26 01:30:01

切换样式表html页 1 2 3 4 5 6 7 8 9 样式表切换 10 11 12 13 14 15 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

切换样式表

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>样式表切换</10 
11 link href="css/default.css" type="text/css" rel="stylesheet" rev title="default" 12 
13 ="css/alternate.css"="alternate stylesheet"="alternate"="alternate" 14 
15 script src="javascript/样式切换.js"="text/javascript" language="javascript"16 
17 script18 
19 20 
21  
22 
23 body24 
25 —设置样式表表为默认样式表 --26 
27 input type="button" value="style1" onclick="setActiveStyleSheet('default');" 28 
29 <!--设置样式表表为可选样式表 --> 
30 
31 ="style2"="setActiveStyleSheet('alternate');" 32 
33 —获取当前样式表的对应 title --34 
35 ="get stylesheet"="getActiveStyleSheet('alternate');" 36 
37  
38 
39 40 
41 html>

Html代码

default.css

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

2 { 
3 blue; 
4 }

样式切换.js

// JavaScript Document 
function setActiveStyleSheet(title) { 
var i,a; 
if (title) 
 { 
11     for(i=0; (a = document.getElementsByTagName('link')[i]); i++) 
    { 
15         if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) 
         { 
19             a.disabled = true; 
21             if(a.getAttribute('title') == title) 
23             a.disabled = false        } 
    } 
 } 
} 
 getActiveStyleSheet() { 
37 ) { 
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) alert(a.getAttribute('title')); 
42 
43 }