Website Instant skin Changing function detailed

Principle: Use a cookie and DOM operation to invoke a different stylesheet file to achieve the foreground skin change.

HTML code section:
1. To have a style sheet link with an ID, we're going to invoke a different href by manipulating it. Copy Content to Clipboard

Code:

<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />2. Skin selection button (background for each Li add onclick event, trigger skin change function) copy content to clipboard

Code:

   
<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 section:
1. Change the Skin method copy content to clipboard

Code:

//设置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. Access cookies copy content to clipboard

Code:

Save current skin N to 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 ();
}
Returns the skin style set by the user
Skin.readcookie=function () {
var skin=0;
var Mycookie=document.cookie;
var name= "Skin_cookie";
var start1=mycookie.indexof (name+ "=");
if (start1==-1) {
skin=0;//Display the default style if no settings are set
}
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. Bind the Skin Change button event copy content to clipboard

Code:

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. After the page load completes, sets the skin style to copy the content to the Clipboard

Code:

window.onload=function(){
    skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
    skin.addEvent();//绑定按钮事件
}