本文向大家簡(jiǎn)單介紹一下實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換的方法，這里主要從Javascript方法和服務(wù)器端腳本兩個(gè)方面向大家介紹，希望對(duì)你有所幫助。

實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換

如何實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換？用W3C標(biāo)準(zhǔn)建造的網(wǎng)站，從理論上來(lái)說(shuō)可以做到完全的表現(xiàn)與結(jié)構(gòu)相分離。打個(gè)比方，就是可以在不動(dòng)骨架（結(jié)構(gòu)，XHMTL）和肌肉（行為，Javascript）的前提下，徹徹底底地?fù)Q一身皮（表現(xiàn)，CSS）。

當(dāng)然，換皮之前你需要先按W3C標(biāo)準(zhǔn)建好你的網(wǎng)站，并且為它準(zhǔn)備兩套表現(xiàn)不一樣的CSS?！皳Q皮”實(shí)質(zhì)上就是“換CSS”，我們要做的，只是用某種方法讓瀏覽器載入另一套CSS，重新渲染頁(yè)面。

Javascript方法

可以用Javascript的DOM方法訪問(wèn)link對(duì)象，再將不需要的CSS設(shè)為“禁用（disabled）”，剩下的CSS就會(huì)被瀏覽器用來(lái)渲染頁(yè)面。腳本如下，請(qǐng)注意其中的注釋：

然后在合適的地方調(diào)用這個(gè)函數(shù)，以本頁(yè)為例，添加如下兩個(gè)按鈕：

<inputtypeinputtype=\"button\"value=\"清光\"onclick=\  
"setStyle(\'清光\');\"/> 
<inputtypeinputtype=\"button\"value=\"冥焰\"onclick=  
\"setStyle(\'冥焰\');\"/>　　  

使用Javascript的好處是方便、快捷、簡(jiǎn)單，缺點(diǎn)也是很明顯的：很難做到全站的CSS切換，只能局限在當(dāng)前頁(yè)上。為了記憶用戶的選擇，可行的方案就是采用cookie?？墒蔷退闶褂胏ookie，也需要在何時(shí)載入CSS，用戶沒(méi)有Javasciprt支持怎么辦等問(wèn)題上多做好些文章。

服務(wù)器端腳本

毫無(wú)疑問(wèn)，最好的CSS切換器應(yīng)該使用服務(wù)器端腳本（PHP、ASP、JSP等）來(lái)開(kāi)發(fā)。這樣做的好處是很明顯的：直接、高效、兼容性好、可以記憶用戶選擇、甚至可以組合不同的CSS實(shí)現(xiàn)相當(dāng)復(fù)雜的“皮膚”切換。

我這里就用PHP為例，用其他的語(yǔ)言也都大同小異，對(duì)一般的開(kāi)發(fā)人員來(lái)說(shuō)不會(huì)有任何困難。

基本思路是這樣：用戶選擇一種“皮膚”，把用戶的選擇記入cookie（記入數(shù)據(jù)庫(kù)也一樣，不過(guò)這樣系統(tǒng)開(kāi)銷會(huì)大一些），用戶訪問(wèn)網(wǎng)站上的任何一個(gè)頁(yè)面時(shí)，再?gòu)腸ookie（或數(shù)據(jù)庫(kù)）中讀出之前用戶的選擇，載入相應(yīng)的CSS文件（這里還是以方法一中講到的a.css和b.css為例）。

創(chuàng)建一個(gè)名為switcher.php的文件，內(nèi)容如下：

php$style=$_GET[\"style\"];setcookie(\'style\',$style,time()+31536000,\'/\',\'.site.com\',  
\'0\');header(\"location:\".$_SERVER[\'HTTP_REFERER\']);?>　 

這段腳本先讀取query數(shù)據(jù)，然后把參數(shù)style的值記入cookie，最后返回上一頁(yè)。接下來(lái)我們就可以創(chuàng)建兩個(gè)用于切換樣式的鏈接了，并且放在合適的頁(yè)面上，比如首頁(yè)或用戶管理后臺(tái)（注意把其中的site.com換成你的域名）：

<ahrefahref=\"switcher.php?style=a\">主題Aa> 
<ahrefahref=\"switcher.php?style=b\">主題Ba>　  
 

點(diǎn)擊任意一個(gè)鏈接，相應(yīng)的就會(huì)把“a”或“b”記入cookie，然后就需要一段腳本來(lái)讀取這個(gè)cookie值并且輸出XHTML來(lái)引入對(duì)應(yīng)的CSS： 

phpif(isset($_COOKIE[\"style\"])){$style=$_COOKIE[\"style\"];}
else{$style=\"a\";//默認(rèn)采用主題A}?> 
 
<linkrellinkrel=\"stylesheet\"type=\"text/css\"  
 
title=\"當(dāng)前選擇的主題\"href=\"phpecho$style?>.css\"/> 

每一個(gè)需要切換樣式的頁(yè)面都要加上這段代碼，所以直接把它加入網(wǎng)站的頭文件中就行了。當(dāng)然你可以根據(jù)自己的需要修改這個(gè)腳本，但萬(wàn)變不離其宗，總的思路應(yīng)該是不變的。

示例代碼：

<scripttypescripttype=\"text/javascript\"> 
functionsetStyle(title){  
 
//預(yù)定義變量  
vari,links;  
 
//用DOM方法獲得所有的link元素  
links=document.getElementsByTagName(\"link\");  
 
for(i=0;links[i];i++){  
 
//判斷此link元素的rel屬性中是否有style關(guān)鍵字  
//即此link元素是否為樣式表link  
//同時(shí)判斷此link元素是否含有title屬性  
if(links[i].getAttribute(\"rel\").indexOf(\"style\")!=-1  
&&links[i].getAttribute(\"title\")){  
 
//先不管三七二十一把它設(shè)為disabled  
links[i].disabled=true;  
 
//再判斷它的title中是否有我們指定的關(guān)鍵字  
if(links[i].getAttribute(\"title\").indexOf(title)!=-1)  
 
//如果有則將其激活  
links[i].disabled=false;  
}  
}  
}  
script> 
 
<linkrellinkrel=\"stylesheet\"type=\"text/css\"  
title=\"主題A\"href=\"a.css\"/> 
 
<linkrellinkrel=\"alternatestylesheet\"type=\"text/css\"  
title=\"主題B\"href=\"b.css\"/> 
 

【編輯推薦】

1. CSS布局調(diào)試的十大有效方法
2. IE6.0對(duì)padding的解讀分析
3. CSS樣式表高效使用八大秘訣
4. CSS中margin參數(shù)省略原則
5. IE6中常見(jiàn)CSS兼容性解決十大技巧