前言

網頁換膚是很早之前比較流行的技術，現在都不怎么流行了。但是，有時候有些客戶就是想要這個換膚功能。于是就實踐做了一下網頁換膚，方法有很多，下面先對一種方法做一下簡單的介紹。

網頁換膚的基本原理

基本原理很簡單，就是使用 JS 切換對應的 CSS 樣式表。除了切換 CSS 樣式表文件之外，通常的網頁換膚還需要通過 Cookie 來記錄用戶之前更換過的皮膚，這樣下次用戶訪問的時候，就可以自動使用上次用戶配置的選項。 那么基本工作流程就出來了：訪問網頁——JS 讀取 Cookie ——如果沒有，使用默認皮膚——如果有，使用指定皮膚；用戶點擊換膚選項——JS 控制替換對應的 CSS 樣式表——將皮膚選項寫進 Cookie 保存。

網頁換膚事先需要的準備

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

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

實現點擊切換對應 CSS 功能

html代碼，包括點擊和下拉2中形式，如下圖：

HTML實現代碼如下：

<P>請選擇下面的下拉菜單測試換膚效果</P><a href=# onclick="changecss('css.css')">css.css</a><a href=# onclick="changecss('css1.css')">css1.css</a><a href=# onclick="changecss('css2.css')">css2.css</a><a href=# onclick="changecss('css3.css')">css3.css</a><br><select onchange="changecss(this.value)"><option>選擇樣式單文件</option><script language="javascript">var csss=new Array();csss[0]="css.css";csss[1]="css1.css";csss[2]="css2.css";csss[3]="css3.css";var i;for(i=0;i<4;i++)     if(thisskin==csss[i])           document.write("<option value=/""+csss[i]+"/" selected>"+csss[i]+"樣式單文件</option>");     else           document.write("<option value=/""+csss[i]+"/">"+csss[i]+"樣式單文件</option>");</script></select>

JS代碼如下：

function SetCookie(name,value){     var argv=SetCookie.arguments;     var argc=SetCookie.arguments.length;     var expires=(2<argc)?argv[2]:null;     var path=(3<argc)?argv[3]:null;     var domain=(4<argc)?argv[4]:null;     var secure=(5<argc)?argv[5]:false;     document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");}function GetCookie(Name) {     var search = Name + "=";     var returnvalue = "";     if (document.cookie.length > 0) {           offset = document.cookie.indexOf(search);           if (offset != -1) {                       offset += search.length;                 end = document.cookie.indexOf(";", offset);                                         if (end == -1)                       end = document.cookie.length;                 returnvalue=unescape(document.cookie.substring(offset,end));           }     }     return returnvalue;}var thisskin;thisskin=GetCookie("nowskin");if(thisskin!="")     skin.href=thisskin;else     skin.href="css.css";function changecss(url){     if(url!=""){           skin.href=url;           var expdate=new Date();           expdate.setTime(expdate.getTime()+(24*60*60*1000*30));           //expdate=null;                                   //以下設置COOKIES時間為1年,自己隨便設置該時間..           SetCookie("nowskin",url,expdate,"/",null,false);     }}

到這里效果代碼就完成了，下面可以大家點擊查看下具體效果的演示頁面。演示查看