如何實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換?_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
用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)站,并且為它預(yù)備兩套表現(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)注重其中的注釋?zhuān)?br/>
然后在合適的地方調(diào)用這個(gè)函數(shù),以本頁(yè)為例,添加如下兩個(gè)按鈕:
<input type="button" value="清光" onclick="setStyle('清光');" /><input type="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)銷(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)容如下:
<?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換成你的域名):
<a href="switcher.php?style=a">主題A</a>
<a href="switcher.php?style=b">主題B</a>
點(diǎn)擊任意一個(gè)鏈接,相應(yīng)的就會(huì)把“a”或“b”記入cookie,然后就需要一段腳本來(lái)讀取這個(gè)cookie值并且輸出XHTML來(lái)引入對(duì)應(yīng)的CSS:
<?php if(isset($_COOKIE["style"])){ $style = $_COOKIE["style"]; }else{ $style = "a";//默認(rèn)采用主題A }?>
<link rel="stylesheet" type="text/css"
title="當(dāng)前選擇的主題" href="<?php echo $style ?>.css" />
每一個(gè)需要切換樣式的頁(yè)面都要加上這段代碼,所以直接把它加入網(wǎng)站的頭文件中就行了。當(dāng)然你可以根據(jù)自己的需要修改這個(gè)腳本,但萬(wàn)變不離其宗,總的思路應(yīng)該是不變的。
<script type="text/javascript">
function setStyle(title) {
//預(yù)定義變量
var i, links;
//用DOM方法獲得所有的link元素
links = document.getElementsByTagName("link");
for(i=0; links[i]; i ) {
//判定此link元素的rel屬性中是否有style要害字
//即此link元素是否為樣式表link
//同時(shí)判定此link元素是否含有title屬性
if(links[i].getAttribute("rel").indexOf("style") != -1
&& links[i].getAttribute("title")) {
//先不管三七二十一把它設(shè)為disabled
links[i].disabled = true;
//再判定它的title中是否有我們指定的要害字
if(links[i].getAttribute("title").indexOf(title) != -1)
//假如有則將其激活
links[i].disabled = false;
}
}
}
</script>
<link rel="stylesheet" type="text/css"
title="主題A" href="a.css" />
<link rel="alternate stylesheet" type="text/css"
title="主題B" href="b.css" />
當(dāng)然,換皮之前你需要先按W3C標(biāo)準(zhǔn)建好你的網(wǎng)站,并且為它預(yù)備兩套表現(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)注重其中的注釋?zhuān)?br/>
然后在合適的地方調(diào)用這個(gè)函數(shù),以本頁(yè)為例,添加如下兩個(gè)按鈕:
<input type="button" value="清光" onclick="setStyle('清光');" /><input type="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)銷(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)容如下:
<?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換成你的域名):
<a href="switcher.php?style=a">主題A</a>
<a href="switcher.php?style=b">主題B</a>
點(diǎn)擊任意一個(gè)鏈接,相應(yīng)的就會(huì)把“a”或“b”記入cookie,然后就需要一段腳本來(lái)讀取這個(gè)cookie值并且輸出XHTML來(lái)引入對(duì)應(yīng)的CSS:
<?php if(isset($_COOKIE["style"])){ $style = $_COOKIE["style"]; }else{ $style = "a";//默認(rèn)采用主題A }?>
<link rel="stylesheet" type="text/css"
title="當(dāng)前選擇的主題" href="<?php echo $style ?>.css" />
每一個(gè)需要切換樣式的頁(yè)面都要加上這段代碼,所以直接把它加入網(wǎng)站的頭文件中就行了。當(dāng)然你可以根據(jù)自己的需要修改這個(gè)腳本,但萬(wàn)變不離其宗,總的思路應(yīng)該是不變的。
<script type="text/javascript">
function setStyle(title) {
//預(yù)定義變量
var i, links;
//用DOM方法獲得所有的link元素
links = document.getElementsByTagName("link");
for(i=0; links[i]; i ) {
//判定此link元素的rel屬性中是否有style要害字
//即此link元素是否為樣式表link
//同時(shí)判定此link元素是否含有title屬性
if(links[i].getAttribute("rel").indexOf("style") != -1
&& links[i].getAttribute("title")) {
//先不管三七二十一把它設(shè)為disabled
links[i].disabled = true;
//再判定它的title中是否有我們指定的要害字
if(links[i].getAttribute("title").indexOf(title) != -1)
//假如有則將其激活
links[i].disabled = false;
}
}
}
</script>
<link rel="stylesheet" type="text/css"
title="主題A" href="a.css" />
<link rel="alternate stylesheet" type="text/css"
title="主題B" href="b.css" />
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
- 列表UL、OL預(yù)設(shè)標(biāo)記在FF與IE下方式不同的試驗(yàn)
- CSS樣式表設(shè)計(jì)之10條技巧
- 多個(gè)CSS樣式表爭(zhēng)奪特定選擇符的控制權(quán)
- css教程:CSS關(guān)于顯示的分類(lèi)屬性的應(yīng)用示例
- 網(wǎng)頁(yè)設(shè)計(jì)關(guān)于WEB標(biāo)準(zhǔn)的相關(guān)問(wèn)題匯總
- CSShacks:瀏覽器特定選擇器介紹
- 解決IE和Mozilla的布局差別的利器:“!important”
- 符合WEB標(biāo)準(zhǔn)的語(yǔ)義化CSS
- CSS編碼習(xí)慣 hack分開(kāi)寫(xiě)的規(guī)則
- CSS教程CSS盒模型(BoxModel)問(wèn)題詳解
猜你也喜歡看這些
- HTML表格標(biāo)記教程(39):表頭的亮邊框色屬性BORDERCOLORLIGHT
- XHTML具有語(yǔ)義的標(biāo)簽:有關(guān)H1位置的討論
- HTML表格標(biāo)記教程(1):制作表格
- 初學(xué)者接觸HTML了解一些HTML標(biāo)記(1)
- Table布局中單元格background-color鼠標(biāo)響應(yīng)的JS代碼
- HTML表單標(biāo)記教程(4):
- 應(yīng)把所有CSS樣式都放在Head Tag
- 將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
- Semantics語(yǔ)義是Html Xhtml是否真正符合標(biāo)準(zhǔn)的重要部分
- HTML表格標(biāo)記教程(11):水平對(duì)齊屬性ALIGN
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-如何實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換?
。