頁面換膚功能淺析

考試大整理：原理:通過存取cookie和dom操作調用不同的樣式表文件來實現前臺換膚.
    Html代碼部分:
    1.要有一個帶id的樣式表鏈接,我們要通過操作這個鏈接來調用不同的href.
    
    2.皮膚選擇按鈕(后臺為每個li添加onclick事件,觸發(fā)換膚功能)
    

    
• 灰色

    
• 綠色

    
• 黃色

    
• 藍色

    
• 粉色

    
• 紫色

    

    Js部分:
    1.換膚方法
    //設置cookie,按鈕選中狀態(tài),頁面皮膚
    skin.setSkin=function(n){
    var skins =$("skin").getElementsByTagName("li");
    for (i=0;i    {
    skins[i].className="";//初始化按鈕狀態(tài)
    }
    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[i].onclick=function(){skin.setSkin(this.id.substring(5))};　
    }
    }
    4.頁面加載完成后設置皮膚樣式
    window.onload=function(){
    skin.setSkin(skin.readCookie());//根據讀取cookie返回值設置皮膚樣式
    skin.addEvent();//綁定按鈕事件