切换样式表
-
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>
-
default.css
1 body 2 3 { 4 5 background-color:green; 6 7 }
alternate.css
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 }