Javascript combined with css to implement web page skinning function_javascript skills

Html code part:
1. There must be a style sheet link with an id. We need to operate this link to call different hrefs.

2. Skin selection Button (add onclick event for each li in the background to trigger the skin change function)

• Gray


• Green


• Yellow


• Blue


• Pink


• Purple

Js part:
1. Skin changing method
//Set cookie, button selected state, page skin
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName(" li");
for (i=0;i{
skins[i].className="";//Initialize button state
}
skin.setCookie(n);//Save the current style
("skin_" n).className="selected";//Set the style of the selected skin button
("cssfile").href="css/ main" n ".css";//Set page style
}
2. Access cookies
//Save the 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();
}
//Return 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;//If not set, display the default style
}
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 skin button event
skin.addEvent=function(){
var skins =("skin").getElementsByTagName("li");
for (i=0;i {
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4. Set the skin style after the page is loaded
window.onload=function(){
skin.setSkin(skin.readCookie());//Set according to the return value of reading the cookie Skin style
skin.addEvent();//Bind button events