Javascript+css 實現網頁換膚功能

原理:通過存取cookie和dom操作調用不同的樣式表檔案來實現前台換膚.換膚樣本下載：sour.rarHtml代碼部分:1.要有一個帶id的樣式表連結,我們要通過操作這個連結來調用不同的href.<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />2.皮膚選擇按鈕(後台為每個li添加onclick事件,觸發換膚功能)<ul id="skin"> <li id="skin_0" title="灰色">灰色</li><li id="skin_1" title="綠色">綠色</li><li id="skin_2" title="黃色">黃色</li><li id="skin_3" title="藍色">藍色</li><li id="skin_4" title="粉色">粉色</li><li id="skin_5" title="紫色">紫色</li></ul>Js部分:1.換膚方法//設定cookie,按鈕選中狀態,頁麵皮膚skin.setSkin=function(n){var skins =("skin").getElementsByTagName("li");for (i=0;i<skins.length;i++){skins[i].className="";//初始化按鈕狀態}skin.setCookie(n);//儲存當前樣式("skin_"+n).className="selected";//設定選中皮膚按鈕的樣式("cssfile").href="css/main"+n+".css";//設定頁面樣式}2.存取cookie//將當前皮膚n存到cookieskin.setCookie=function(n){var expires=new Date();expires.setTime(expires.getTime()+24*60*60*365*1000);var flag="Skin_Cookie="+n;document.cookie=flag+";expires="+expires.toGMTString();}//返回使用者佈建的皮膚樣式skin.readCookie=function(){var skin=0;var mycookie=document.cookie;var name="Skin_Cookie";var start1=mycookie.indexOf(name+"=");if(start1==-1){skin=0;//如果沒有設定則顯示預設樣式}else{var start=mycookie.indexOf("=",start1)+1;var end=mycookie.indexOf(";",start);if(end=-1){end=mycookie.length;}var values= unescape(mycookie.substring(start,end));if (values!=null){skin=values;}}return skin;}3.綁定換膚按鈕事件skin.addEvent=function(){var skins =("skin").getElementsByTagName("li");for (i=0;i<skins.length;i++){skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};}}4.頁面載入完成後設定皮膚樣式window.onload=function(){skin.setSkin(skin.readCookie());//根據讀取cookie傳回值設定皮膚樣式skin.addEvent();//綁定按鈕事件