DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> cookie和dom操作調用樣式表實現網頁換膚
cookie和dom操作調用樣式表實現網頁換膚
編輯:CSS進階教程     

原理:通過存取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();//綁定按鈕事件

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved