改變風格(css)的四種方法

：帶cookies功能

引用內容：<SCRIPT LANGUAGE=javascript>
<!--
function SetCookie(name,value){
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(2<argc)?argv[2]:null;
var path=(3<argc)?argv[3]:null;
var domain=(4<argc)?argv[4]:null;
var secure=(5<argc)?argv[5]:false;
document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
}

function GetCookie(Name) {
var search = Name + "=";
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) { 
offset += search.length;
end = document.cookie.indexOf(";", offset); 
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end));
}
}
return returnvalue;
}

var thisskin;
thisskin=GetCookie("nowskin");
if(thisskin!="")
skin.href=thisskin;
else
skin.href="css.css";

function changecss(url){
if(url!=""){
skin.href=url;
var expdate=new Date();
expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
//expdate=null;
//以下設定COOKIES時間為1年,自己隨便設定該時間..
SetCookie("nowskin",url,expdate,"/",null,false);
}
}
//-->
</SCRIPT>

使用方法

將上面的代碼存為 styleswitch.js

引用內容：<script type="text/javascript" src="styleswitch.js"></script>

<link ID="skin" rel="stylesheet" type="text/css">
<P>請選擇下面的下拉式功能表測試換膚效果</P>

<a href=# onclick="changecss('css.css')">css.css</a>
<a href=# onclick="changecss('css1.css')">css1.css</a>
<a href=# onclick="changecss('css2.css')">css2.css</a>
<a href=# onclick="changecss('css3.css')">css3.css</a>
<br>
<select onchange="changecss(this.value)">
<option>選擇樣式單檔案</option>
<script language="javascript">
var csss=new Array();
csss[0]="css.css";
csss[1]="css1.css";
csss[2]="css2.css";
csss[3]="css3.css";
var i;
for(i=0;i<4;i++)
if(thisskin==csss[i])
document.write("<option value=\""+csss[i]+"\" selected>"+csss[i]+"樣式單檔案</option>");
else
document.write("<option value=\""+csss[i]+"\">"+csss[i]+"樣式單檔案</option>");
</script>
</select>

2：複雜一點的

引用內容：function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}

function setStylesheet(title) {
var i, cacheobj
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //enable chosen style sheet
}
}
}

function chooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu 
var i
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
setStylesheet(selectedtitle)

function externalLinks() { 
if (!document.getElementsByTagName) return; 
var anchors = document.getElementsByTagName("a"); 
for (var i=0; i<anchors.length; i++) { 
var anchor = anchors[i]; 
if (anchor.getAttribute("href") && 
anchor.getAttribute("rel") == "external") 
anchor.target = "_blank"; 
} 
} 
window.onload = externalLinks;

使用方法

將上面的代碼存為 styleswitch.js

引用內容：<script type="text/javascript" src="styleswitch.js"></script>

<link media="screen" href="css1.css" rel="stylesheet" type="text/css" title="default" />
<link media="screen" href="css2.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link media="screen" href="css3.css" rel="alternate stylesheet" type="text/css" title="orange" />
<a title="預設風格" href="javascript:chooseStyle('default',5)">預設風格</a>
<a title="橙色風格" href="javascript:chooseStyle('orange',5)">橙色風格</a>
<a title="藍色風格" href="javascript:chooseStyle('blue',5)">藍色風格</a>

3：簡單的方法

引用內容：<script type="text/javascript">
function setStyle(title) {

//預定義變數
var i, links;

//用DOM方法獲得所有的link元素
links = document.getElementsByTagName("link");

for(i=0; links[i]; i++) {

//判斷此link元素的rel屬性中是否有style關鍵字
//即此link元素是否為樣式表link
//同時判斷此link元素是否含有title屬性
if(links[i].getAttribute("rel").indexOf("style") != -1
&& links[i].getAttribute("title")) {

//先不管三七二十一把它設為disabled
links[i].disabled = true;

//再判斷它的title中是否有我們指定的關鍵字
if(links[i].getAttribute("title").indexOf(title) != -1)

//如果有則將其啟用
links[i].disabled = false;
}
}
}
</script>

使用方法

將上面的代碼存為 styleswitch.js

引用內容：<script type="text/javascript" src="styleswitch.js"></script>

<link rel="stylesheet" type="text/css"
title="a" href="css0.css" />
<link rel="alternate stylesheet" type="text/css"
title="b" href="css1.css" />
<link rel="stylesheet" type="text/css"
title="c" href="css2.css" />
<link rel="stylesheet" type="text/css"
title="d" href="css3.css" />

<P>請選擇下面的下拉式功能表測試換膚效果</P>
<input type="button" value="清光" onclick="setStyle('a');" />
<input type="button" value="冥焰" onclick="setStyle('b');" />
<input type="button" value="冥焰" onclick="setStyle('c');" />
<input type="button" value="冥焰" onclick="setStyle('d');" />

4：用了一個可以隱藏的層來設定風格

引用內容：// 隱藏顯示換膚框
function ShowHideDiv(init) {
 if(document.getElementById("Sright").style.display == "block"){
   document.getElementById("Sright").style.display = "none";
  }
  else{
   document.getElementById("Sright").style.display = "block";
  }
}
//-->

其他的和上面的三種差不多

/Files/MaxIE/rogu_changecss.rar