三種方式實(shí)現(xiàn)CSS皮膚適時(shí)切換
本文和大家重點(diǎn)討論一下如何用CSS實(shí)現(xiàn)皮膚適時(shí)切換，W3C標(biāo)準(zhǔn)建造的網(wǎng)站，可以做到完全的表現(xiàn)與結(jié)構(gòu)相分離，就如同換了一身皮，“換皮”實(shí)質(zhì)上就是“換CSS”，我們要做的，只是用某種方法讓瀏覽器載入另一套CSS，重新渲染頁面。
用CSS實(shí)現(xiàn)皮膚適時(shí)切換
用W3C標(biāo)準(zhǔn)建造的網(wǎng)站，從理論上來說可以做到完全的表現(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。“換皮”實(shí)質(zhì)上就是“換CSS”，我們要做的，只是用某種方法讓瀏覽器載入另一套CSS，重新渲染頁面。方法有很多種，我就介紹最常見的三種。
方法一：什么也不干
假設(shè)我們有兩套CSS，分別封閉在兩個(gè)不同的文件中：a.css和b.css。然后在<head>和</head>之間加入如下兩行XHTML代碼：
- <linkrellinkrel="stylesheet"type="text/css"
- title="主題A"href="a.css"/>
- <linkrellinkrel="alternatestylesheet"type="text/css"
- title="主題B"href="b.css"/>
然后用你的Firefox打開這個(gè)頁面，在菜單欄中選擇：查看->頁面風(fēng)格，應(yīng)該可以看到如下的“風(fēng)景”：
就這么簡(jiǎn)單，現(xiàn)在你就可以用Firefox來“換皮”了。IE？IE沒這個(gè)功能……MS就是這么拽，W3C“明文推薦”：要求瀏覽器提供給用戶自己選擇樣式表的權(quán)力，可它就不這么干。幸運(yùn)的是這件事也不是太難雜。#p#
方法二：Javascript
在方法一的基礎(chǔ)上，可以用Javascript的DOM方法訪問link對(duì)象，再將不需要的CSS設(shè)為“禁用（disabled）”，剩下的CSS就會(huì)被瀏覽器用來渲染頁面。腳本如下，請(qǐ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>
然后在合適的地方調(diào)用這個(gè)函數(shù)，以本頁為例，添加如下兩個(gè)按鈕：
- <inputtypeinputtype="button"value="清光"
- onclick="setStyle('清光');"/>
- <inputtypeinputtype="button"value="冥焰"
- onclick="setStyle('冥焰');"/>
使用Javascript的好處是方便、快捷、簡(jiǎn)單，缺點(diǎn)也是很明顯的：很難做到全站的CSS切換，只能局限在當(dāng)前頁上。為了記憶用戶的選擇，可行的方案就是采用cookie。可是就算使用cookie，也需要在何時(shí)載入CSS，用戶沒有Javasciprt支持怎么辦等問題上多做好些文章。所以不如用下面的方法——#p#
方法三：服務(wù)器端腳本
毫無疑問，***的CSS切換器應(yīng)該使用服務(wù)器端腳本（PHP、ASP、JSP等）來開發(fā)。這樣做的好處是很明顯的：直接、高效、兼容性好、可以記憶用戶選擇、甚至可以組合不同的CSS實(shí)現(xiàn)相當(dāng)復(fù)雜的“皮膚”切換。
我這里就用PHP為例，用其他的語言也都大同小異，對(duì)一般的開發(fā)人員來說不會(huì)有任何困難。
基本思路是這樣：用戶選擇一種“皮膚”，把用戶的選擇記入cookie（記入數(shù)據(jù)庫(kù)也一樣，不過這樣系統(tǒng)開銷會(huì)大一些），用戶訪問網(wǎng)站上的任何一個(gè)頁面時(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，***返回上一頁。接下來我們就可以創(chuàng)建兩個(gè)用于切換樣式的鏈接了，并且放在合適的頁面上，比如首頁或用戶管理后臺(tái)（注意把其中的site.com換成你的域名）：
- <ahrefahref="switcher.php?style=a">主題A</a>
- <ahrefahref="switcher.php?style=b">主題B</a>
點(diǎn)擊任意一個(gè)鏈接，相應(yīng)的就會(huì)把“a”或“b”記入cookie，然后就需要一段腳本來讀取這個(gè)cookie值并且輸出XHTML來引入對(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è)需要切換樣式的頁面都要加上這段代碼，所以直接把它加入網(wǎng)站的頭文件中就行了。當(dāng)然你可以根據(jù)自己的需要修改這個(gè)腳本，但萬變不離其宗，總的思路應(yīng)該是不變的。
詳文參考：http://www.mypchelp.cn/it/200905/28922.shtml
【編輯推薦】
