即時切換網頁的CSS樣式實現

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

當然，換皮之前你需要先按W3C標準建造你的網站，並且為它準備兩套表現不一樣的CSS。 “換皮”實質上就是“換CSS”，我們要做的，只是用某種方法讓瀏覽器載入另一套CSS，重新渲染頁面。方法有很多種，我就介紹最常見的三種。

方法一：什麼也不乾

啊？什麼也不乾？嗯，這個……準確地說是：就乾那麼一丁點兒 （你還真以為有這麼好的事兒呀……）。

假設我們有兩套CSS，分別封閉在兩個不同的文件中：a.css和b.css。然後在

和之間加入如下兩行XHTML代碼：

然後用你的Firefox打開這個頁面，在菜單欄中選擇：查看-> 頁面風格，應該可以看到如下的“風景」：

 

就這麼簡單，現在你就可以用Firefox來「換皮」了。 IE？ IE沒這個功能…MS就是這麼拽，W3C「明文推薦」：要求瀏覽器提供給使用者自己選擇樣式表的權力，可它就不這麼幹。幸運的是這件事也不是太難雜，咱就代勞一下吧。

[separator]

方法二：Javascript

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

然後在適當的地方呼叫這個函數，以本頁為例，加上以下兩個按鈕：

　　

使用Javascript的好處是方便、快速、簡單，缺點也是很明顯的：很難做到全站的CSS切換，只能侷限在目前頁上。為了記憶使用者的選擇，可行的方案就是採用cookie。可是就算使用cookie，也需要在何時載入CSS，使用者沒有Javasciprt支援怎麼辦等問題上多做好些文章。所以不如用下面的方法——

方法三：伺服器端腳本

毫無疑問，最好的CSS切換器應該使用伺服器端腳本（PHP、ASP、JSP等）來開發。這樣做的好處是很明顯的：直接、高效、相容性好、可以記憶使用者選擇、甚至可以組合不同的CSS實現相當複雜的「皮膚」切換。

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

基本想法是這樣：使用者選擇一種“皮膚”，把使用者的選擇記入cookie（記入資料庫也一樣，不過這樣系統開銷會大一些），使用者造訪網站上的任何一個頁面時，再從cookie（或資料庫）中讀出先前使用者的選擇，載入對應的CSS檔案（這裡還是以方法一中講到的a.css和b.css為例）。

建立一個名為switcher.php的文件，內容如下：

　

這段腳本先讀取query數據，然後把參數style的值記入cookie ，最後返回上一頁。接下來我們就可以創建兩個用於切換樣式的連結了，並且放在合適的頁面上，例如首頁或用戶管理後台（注意把其中的site.com換成你的網域）：

主題A
主題B　　

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

 title="當前選擇的主題" href=".css" />

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

  //預定義變數
  var i, 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
   再判斷它的title中是否有我們指定的關鍵字

      if(links[i].getAttribute("title").indexOf(title) != -1)

    i].disabled = false;

    }

  }
}


 

 title="主題A" href="a.css" />

 title="主題B" href="b.css" />

以上就是即時切換網頁的CSS樣式實現的內容，更多相關文章請關注PHP中文網（www.php.cn）！