濮阳杆衣贸易有限公司

主頁 > 知識庫 > W3C標(biāo)準(zhǔn):實(shí)時(shí)切換CSS樣式

W3C標(biāo)準(zhǔn):實(shí)時(shí)切換CSS樣式

熱門標(biāo)簽:沸思外呼線路 400電話辦理安徽 南通電話外呼系統(tǒng)開發(fā) 北京銷售外呼系統(tǒng)線路 電銷智能機(jī)器人靠譜么 江西防封卡外呼系統(tǒng)怎么安裝 電銷機(jī)器人的宣傳語 南寧外呼電銷系統(tǒng)招商 石家莊電話機(jī)器人電話
用W3C標(biāo)準(zhǔn)建造的網(wǎng)站,從理論上來說可以做到完全的表現(xiàn)與結(jié)構(gòu)相分離。打個比方,就是可以在不動骨架(結(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,重新渲染頁面。方法有很多種,我就介紹最常見的三種。

方法一:什么也不干

???什么也不干?嗯,這個……準(zhǔn)確地說是:就干那么一丁點(diǎn)兒 (你還真以為有這么好的事兒呀……)。

假設(shè)我們有兩套CSS,分別封閉在兩個不同的文件中:a.css和b.css。然后在head>和/head>之間加入如下兩行XHTML代碼:

然后用你的Firefox打開這個頁面,在菜單欄中選擇:查看 -> 頁面風(fēng)格,應(yīng)該可以看到如下的“風(fēng)景”:

 

就這么簡單,現(xiàn)在你就可以用Firefox來“換皮”了。IE?IE沒這個功能……MS就是這么拽,W3C“明文推薦”:要求瀏覽器提供給用戶自己選擇樣式表的權(quán)力,可它就不這么干。幸運(yùn)的是這件事也不是太難雜,咱就代勞一下吧。

[separator]

方法二:Javascript

在方法一的基礎(chǔ)上,可以用Javascript的DOM方法訪問link對象,再將不需要的CSS設(shè)為“禁用(disabled)”,剩下的CSS就會被瀏覽器用來渲染頁面。腳本如下,請注意其中的注釋:

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

input type="button" value="清光" onclick="setStyle(''清光'');" />

input type="button" value="冥焰" onclick="setStyle(''冥焰'');" />
  

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

方法三:服務(wù)器端腳本

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

我這里就用PHP為例,用其他的語言也都大同小異,對一般的開發(fā)人員來說不會有任何困難。

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

創(chuàng)建一個名為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)建兩個用于切換樣式的鏈接了,并且放在合適的頁面上,比如首頁或用戶管理后臺(注意把其中的site.com換成你的域名):

a href="switcher.php?style=a">主題A/a>

a href="switcher.php?style=b">主題B/a>
  

點(diǎn)擊任意一個鏈接,相應(yīng)的就會把“a”或“b”記入cookie,然后就需要一段腳本來讀取這個cookie值并且輸出XHTML來引入對應(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" />

每一個需要切換樣式的頁面都要加上這段代碼,所以直接把它加入網(wǎng)站的頭文件中就行了。當(dāng)然你可以根據(jù)自己的需要修改這個腳本,但萬變不離其宗,總的思路應(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關(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>

link rel="stylesheet" type="text/css"
 title="主題A" href="a.css" />

link rel="alternate stylesheet" type="text/css"
 title="主題B" href="b.css" />?

標(biāo)簽:來賓 鹽城 陽泉 北海 晉中 寧夏 衢州 云南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《W3C標(biāo)準(zhǔn):實(shí)時(shí)切換CSS樣式》,本文關(guān)鍵詞  W3C,標(biāo)準(zhǔn),實(shí)時(shí),切換,CSS,樣式,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《W3C標(biāo)準(zhǔn):實(shí)時(shí)切換CSS樣式》相關(guān)的同類信息!
  • 本頁收集關(guān)于W3C標(biāo)準(zhǔn):實(shí)時(shí)切換CSS樣式的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    伊金霍洛旗| 兴安盟| 谢通门县| 上思县| 承德市| 甘泉县| 巴南区| 东台市| 雷山县| 太康县| 惠东县| 梁山县| 社会| 黄浦区| 安平县| 南召县| 阿克| 息烽县| 边坝县| 扎赉特旗| 开化县| 财经| 怀远县| 大荔县| 嘉荫县| 金塔县| 遵化市| 苗栗市| 囊谦县| 五指山市| 酒泉市| 嘉善县| 沙田区| 抚州市| 纳雍县| 兰西县| 子长县| 深圳市| 墨玉县| 枣强县| 浦江县|