[JS][Function]Multi-CSS transfer

實現多風格選擇樣式實時切換

<head></head> 中放入以下語法,將兩個.css文件加入

<link rel="stylesheet" type=" text/CSS" href="css.css"/>  
<link rel="stylesheet" type="text/CSS" href="aaa.css" title="aaa" />  
<link rel="stylesheet" type="text/CSS" href="bbb.css" title="bbb" />

--- Link --- 設定點擊事件,以更新css樣式

<a href="#" onclick="setActiveStyleSheet('',1);returnfalse;"> 默認樣式</a>  
<a href="#" onclick="setActiveStyleSheet('aaa',1); return false;">樣式1</a>  
<a href="#" onclick="setActiveStyleSheet('bbb',1); return false;">樣式2</a>

--- JS Code ---

functionsetActiveStyleSheet(title){  
var i, a, main; vari,a,main;  
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { for(i=0;(a=document.getElementsByTagName("link")[i]);i++){  
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { if(a.getAttribute("rel").indexOf("style")!=-1&&a.getAttribute("title")){  
a.disabled = true; a.disabled=true;  
if(a.getAttribute("title") == title) a.disabled = false; if(a.getAttribute("title")==title)a.disabled=false;  
}
  
}
  
}  

function getActiveStyleSheet() { functiongetActiveStyleSheet(){  
var i, a; vari,a;  
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { for(i=0;(a=document.getElementsByTagName("link")[i]);i++){  
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); if(a.getAttribute("rel").indexOf("style")!=-1&&a.getAttribute("title")&&!a.disabled)returna.getAttribute("title");  
}
  
return null; returnnull;  
}
  

function getPreferredStyleSheet() { functiongetPreferredStyleSheet(){  
var i, a; vari,a;  
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { for(i=0;(a=document.getElementsByTagName("link")[i]);i++){  
if(a.getAttribute("rel").indexOf("style") != -1 if(a.getAttribute("rel").indexOf("style")!=-1  
&& a.getAttribute("rel").indexOf("alt") == -1 &&a.getAttribute("rel").indexOf("alt")==-1  
&& a.getAttribute("title") &&a.getAttribute("title")  
) return a.getAttribute("title"); )returna.getAttribute("title");  
}
  
return null; returnnull;  
}
  

function createCookie(name,value,days) { functioncreateCookie(name,value,days){  
if (days) { if(days){  
var date = new Date(); vardate=newDate();  
date.setTime(date.getTime()+(days*24*60*60*1000));  
var expires = "; expires="+date.toGMTString(); varexpires=";expires="+date.toGMTString();  
}
  
else expires = ""; elseexpires="";  
documents.cookie = name+"="+value+expires+"; path=/"; documents.cookie=name+"="+value+expires+";path=/";  
}
  

function readCookie(name) { functionreadCookie(name){  
var nameEQ = name + "="; varnameEQ=name+"=";  
var ca = documents.cookie.split(';'); varca=documents.cookie.split(';');  
for(var i=0;i < ca.length;i++) { for(vari=0;i<ca.length;i++){  
var c = ca[i]; varc=ca[i];  
while (c.charAt(0)==' ') c = c.substring(1,c.length); while(c.charAt(0)=='')c=c.substring(1,c.length);  
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); if(c.indexOf(nameEQ)==0)returnc.substring(nameEQ.length,c.length);  
}
  
return null; returnnull;  
}
  

window.onload = function(e) { window.onload=function(e){  
var cookie = readCookie("style"); varcookie=readCookie("style");  
var title = cookie ? cookie : getPreferredStyleSheet(); vartitle=cookie?cookie:getPreferredStyleSheet();  
setActiveStyleSheet(title);  
}
  

window.onunload = function(e) { window.onunload=function(e){  
var title = getActiveStyleSheet(); vartitle=getActiveStyleSheet();  
createCookie("style", title, 365); createCookie("style",title,365);  
}
  

var cookie = readCookie("style"); varcookie=readCookie("style");  
var title = cookie ? cookie : getPreferredStyleSheet(); vartitle=cookie?cookie:getPreferredStyleSheet();  
setActiveStyleSheet(title);