本篇文章給大家分享的是有關如何實時切換CSS樣式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

道縣網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,道縣網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為道縣上千余家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿網(wǎng)站制作要多少錢，請找那個售后服務好的道縣做網(wǎng)站的公司定做！

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

用W3C標準建造的網(wǎng)站，從理論上來說可以做到完全的表現(xiàn)與結構相分離。打個比方，就是可以在不動骨架（結構，XHMTL）和肌肉（行為，Javascript）的前提下，徹徹底底地換一身皮（表現(xiàn)，CSS）。

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

Javascript方法

可以用Javascript的DOM方法訪問link對象，再將不需要的CSS設為“禁用（disabled）”，剩下的CSS就會被瀏覽器用來渲染頁面。腳本如下，請注意其中的注釋：

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

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

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

服務器端腳本

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

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

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

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

<?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)建兩個用于切換CSS樣式的鏈接了，并且放在合適的頁面上，比如首頁或用戶管理后臺（注意把其中的site.com換成你的域名）：

<ahrefahref="switcher.php?style=a">主題A</a>  <ahrefahref="switcher.php?style=b">主題B</a>　

點擊任意一個鏈接，相應的就會把“a”或“b”記入cookie，然后就需要一段腳本來讀取這個cookie值并且輸出XHTML來引入對應的CSS：

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

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

◆示例代碼：

<scripttypescripttype="text/javascript"> functionsetStyle(title){   //預定義變量  vari,links;   //用DOM方法獲得所有的link元素  links=document.getElementsByTagName("link");   for(i=0;links[i];i++){   //判斷此link元素的rel屬性中是否有style關鍵字  //即此link元素是否為樣式表link  //同時判斷此link元素是否含有title屬性  if(links[i].getAttribute("rel").indexOf("style")!=-1  &&links[i].getAttribute("title")){   //先不管三七二十一把它設為disabled  links[i].disabled=true;   //再判斷它的title中是否有我們指定的關鍵字  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"/>

以上就是如何實時切換CSS樣式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：如何實時切換CSS樣式
文章URL：http://chinadenli.net/article26/pijcjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、網(wǎng)站改版、虛擬主機、網(wǎng)站營銷、手機網(wǎng)站建設、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)