網頁換膚是一門老技術了，老的現在都不怎么流行了。但是，有時候有些客戶就是想要這個換膚功能。于是就實踐做了一下網頁換膚，結果遇到了很多問題。

網頁換膚的基本原理

基本原理很簡單，就是使用 JS 切換對應的 CSS 樣式表。例如導航網站 Hao123 的右上方就有網頁換膚功能。除了切換 CSS 樣式表文件之外，通常的網頁換膚還需要通過 Cookie 來記錄用戶之前更換過的皮膚，這樣下次用戶訪問的時候，就可以自動使用上次用戶配置的選項。

那么基本工作流程就出來了：訪問網頁――JS 讀取 Cookie ――如果沒有，使用默認皮膚――如果有，使用指定皮膚；用戶點擊換膚選項――JS 控制替換對應的 CSS 樣式表――將皮膚選項寫進 Cookie 保存。

網頁換膚事先需要的準備

首先你可能要準備多套 CSS 樣式表文件，當點擊換膚按鈕的是，使用 JS 來切換對應的 CSS 樣式表。之后，就是在網頁上增加一個 ul li 列表，用 CSS 修飾一下做成換膚選項。例如：

下面我們就來看具體功能代碼。

實現點擊切換對應 CSS 功能

首先，我們的皮膚選項的 HTML 結構是這樣的

<div class=”skin”>  <ul>    <li class=”skin1 hover”></li>    <li class=”skin2”></li>    <li class=”skin3”></li>    <li class=”skin4”></li>  </ul></div>

然后在網頁的頂部偏下的位置放上一個空的 link 標簽，我們將會使用 jQuery 為這個 link 標簽賦予不同的 CSS 文件實現切換效果

其中，我自定義了一個 data-href 屬性來存放系統默認的皮膚，這樣當頁面加載完成之后，如果 JS 沒有檢測到 Cookie 中的皮膚信息，就會把 data-href 中的內容賦值上去。之后就是大家熟悉的 jQuery 代碼：

jQuery(‘.skin li').click(function(){  var currentClass = jQuery(this).attr(‘class');  jQuery(this).siblings().removeClass(‘hover');  jQuery(this).addClass(‘hover');  var cc = currentClass.substring(0,5);  cc = convertcsslittle(cc);  var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + cc;  jQuery(‘.skincsslittle').attr(“href”,skincssurl);createCookie('skin',currentClass,365);});

大體的邏輯就是獲取到當前皮膚的 class 然后截取出來 skin* 然后通過一個函數得到其對應的 CSS 文件。skincssurl 記載的是網頁的非皮膚 CSS 文件，主要用來獲取當前網頁的 CSS 目錄 URL ，最后將混合好的 CSS 皮膚文件賦值準備好的空 link 中，實現換膚。

增加 Cookie 記錄皮膚功能

這里主要用到兩個自定義的函數，用來創建、讀取 Cookie 內容。

function readCookie(name) { var nameEQ = name + “=”; var ca = document.cookie.split(‘;'); for(var i=0;i < ca.length;i++) {  var c = ca[i];  while (c.charAt(0)==' ‘) c = c.substring(1,c.length);  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return false;}function createCookie(name,value,days) {if (days) {var date = new Date();date.setTime(date.getTime()+(days2460601000));var expires = “; expires=”+date.toGMTString();}else expires = “”;document.cookie = name+”=”+value+expires+”; path=/“;}

你只需要把這兩個函數復制到 JS 代碼區域即可。在 jQuery 點擊換膚的功能代碼中，最后一句就創建了一個 Cookie，等網頁加載完成之后，我們需要使用 JS 讀取 Cookie 內容，然后使用 if 判斷：

var cccc = readCookie(“skin”);if (cccc){cccc = cccc.substring(0,5);jQuery(‘.'+cccc).addClass(‘hover').siblings().removeClass(‘hover');ccc = convertcsslittle(cccc);var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + ccc;jQuery(‘.skincsslittle').attr(“href”,skincssurl);}else{var currentcss = jQuery(‘.skincsslittle').attr(“data-href”);var currentcssname = currentcss.substring(currentcss.indexOf(‘style'),currentcss.length);currentcssname = defaulttoclass(currentcssname);jQuery(‘.'+currentcssname).addClass(‘hover').siblings().removeClass(‘hover');jQuery(‘.skincsslittle').attr(“href”,jQuery(‘.skincsslittle').attr(“data-href”));}

不要被這么亂的代碼嚇暈了，實際上邏輯很簡單，先獲取 Cookie 的皮膚值，如果有就為對應的皮膚選項高亮并且轉換得到對應的 CSS 皮膚文件賦值。如果沒有 Cookie 內容，就將 data-href 屬性中記錄的值賦值進去。

網頁換膚的閃爍問題和不完美解決方案

網頁換膚中，會遇到閃爍的問題。就是當點擊切換按鈕的時候，更換顏色或者圖片會閃爍一下?；蛘呤褂?Cookie 記錄之后，用戶使用了非默認的皮膚，也會閃爍一下，先出現默認的樣式然后再閃爍切換成用戶自己選擇的樣式。

這種影響用戶體驗的現象肯定要徹底消滅，但是一直沒有找到完美的解決方法。因為瀏覽器默認的是優先渲染 CSS 之后再加載 JS，特別是使用 Cookie 記錄的皮膚，先渲染現有的 CSS 之后，JS 才能讀取然后切換到皮膚。原理是這樣的，跟客戶協商之后，客戶給出了一個“無閃爍”的換膚效果示例，是 MG12 很早的一款主題。同樣的 Cookie 記錄等，但是他的作品確實沒有閃爍情況。

于是我就查看了他的 JS 代碼，沒有發現特殊之處，后來才想明白，這種閃爍問題，在圖片比較多的網頁中效果尤其明顯，因為切換的 CSS 需要加載圖片需要更多時間。而 MG12 那款主題中，切換的 CSS 文件只是改變了幾個 background 顏色，加載速度快到你眼球反應不過來就造成了不閃爍的假象。

不完美解決方案也是有的，點擊切換按鈕之后的閃爍情況，也是因為要加載圖片等，那么我們可以在訪問網頁的時候，使用預加載技術將其他皮膚圖片預加載或者使用 CSS Sprite 技術做成一張大圖片。

至于 Cookie 記錄閃爍的問題，這是瀏覽器渲染的硬傷，只能盡量減少換膚需要改變的地方，盡量壓縮圖片減小體積。然后優先加載沒有任何皮膚的基礎樣式，之后使用 JS 加載默認樣式或者讀取 Cookie 獲取的皮膚選項。這樣處理，訪問網頁的時候會先顯示白色或者無顏色，之后直接切換成之前選擇的皮膚的顏色，而不會從默認的顏色閃爍變成另一種顏色從而提升一定的用戶體驗。