原理:通過存取cookie和dom操作調用不同的樣式表文件來實現前臺換膚.

 換膚示例下載：sour.rar

html代碼部分:

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存到cookie
skin.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();//綁定按鈕事件