新聞中心
本文和大家重點(diǎn)討論一下如何用CSS實(shí)現(xiàn)皮膚適時(shí)切換,W3C標(biāo)準(zhǔn)建造的網(wǎng)站,可以做到完全的表現(xiàn)與結(jié)構(gòu)相分離,就如同換了一身皮,“換皮”實(shí)質(zhì)上就是“換CSS”,我們要做的,只是用某種方法讓瀏覽器載入另一套CSS,重新渲染頁(yè)面。

公司主營(yíng)業(yè)務(wù):做網(wǎng)站、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出應(yīng)縣免費(fèi)做網(wǎng)站回饋大家。
用CSS實(shí)現(xiàn)皮膚適時(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è)面。方法有很多種,我就介紹最常見(jiàn)的三種。
方法一:什么也不干
假設(shè)我們有兩套CSS,分別封閉在兩個(gè)不同的文件中:a.css和b.css。然后在
和之間加入如下兩行XHTML代碼:
- title="主題A"href="a.css"/>
- title="主題B"href="b.css"/>
然后用你的Firefox打開(kāi)這個(gè)頁(yè)面,在菜單欄中選擇:查看->頁(yè)面風(fēng)格,應(yīng)該可以看到如下的“風(fēng)景”:
就這么簡(jiǎn)單,現(xiàn)在你就可以用Firefox來(lái)“換皮”了。IE?IE沒(méi)這個(gè)功能……MS就是這么拽,W3C“明文推薦”:要求瀏覽器提供給用戶自己選擇樣式表的權(quán)力,可它就不這么干。幸運(yùn)的是這件事也不是太難雜。#p#
方法二:Javascript
在方法一的基礎(chǔ)上,可以用Javascript的DOM方法訪問(wèn)link對(duì)象,再將不需要的CSS設(shè)為“禁用(disabled)”,剩下的CSS就會(huì)被瀏覽器用來(lái)渲染頁(yè)面。腳本如下,請(qǐng)注意其中的注釋?zhuān)?/p>
然后在合適的地方調(diào)用這個(gè)函數(shù),以本頁(yè)為例,添加如下兩個(gè)按鈕:
- onclick="setStyle('清光');"/>
- onclick="setStyle('冥焰');"/>
使用Javascript的好處是方便、快捷、簡(jiǎn)單,缺點(diǎn)也是很明顯的:很難做到全站的CSS切換,只能局限在當(dāng)前頁(yè)上。為了記憶用戶的選擇,可行的方案就是采用cookie??墒蔷退闶褂胏ookie,也需要在何時(shí)載入CSS,用戶沒(méi)有Javasciprt支持怎么辦等問(wèn)題上多做好些文章。所以不如用下面的方法——#p#
方法三:服務(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)銷(xiāo)會(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)容如下:
- 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換成你的域名):
主題A 主題B
點(diǎn)擊任意一個(gè)鏈接,相應(yīng)的就會(huì)把“a”或“b”記入cookie,然后就需要一段腳本來(lái)讀取這個(gè)cookie值并且輸出XHTML來(lái)引入對(duì)應(yīng)的CSS:
- {$style=$_COOKIE["style"];}else{$style="a";//默認(rèn)采用主題A}?>
- title="當(dāng)前選擇的主題"href=".css"/>
每一個(gè)需要切換樣式的頁(yè)面都要加上這段代碼,所以直接把它加入網(wǎng)站的頭文件中就行了。當(dāng)然你可以根據(jù)自己的需要修改這個(gè)腳本,但萬(wàn)變不離其宗,總的思路應(yīng)該是不變的。
詳文參考:http://www.mypchelp.cn/it/200905/28922.shtml
文章標(biāo)題:三種方式實(shí)現(xiàn)CSS皮膚適時(shí)切換
文章地址:http://www.dlmjj.cn/article/dhepssc.html


咨詢
建站咨詢
