HTML code section:
1. To have a style sheet link with an ID, we're going to invoke a different href by manipulating it.
<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)
<ul id= "Skin" >
<li id= "skin_0" title= "Grey" > Grey </li>
<li id= "skin_1" title= "green" > Green </li>
<li id= "skin_2" title= "yellow" > Yellow </li>
<li id= "skin_3" title= "Blue" > Blue </li>
<li id= "Skin_4" title= "Pink" > Pink </li>
<li id= "skin_5" title= "purple" > Purple </li>
</ul>
js section:
1. Skin Replacement method
Set cookies, button selected state, page skin
Skin.setskin=function (n) {
var skins = ("skin"). getElementsByTagName ("Li");
for (i=0;i<skins.length;i++)
{
Skins[i].classname= "";//Initialize button state
}
Skin.setcookie (n);//Save current style
("Skin_" +n). Classname= "selected";//Set style for selected skin buttons
("Cssfile"). href= "Css/main" +n+ ". css";//Set page style
}
2. Access Cookies
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
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. Set skin style After page load completes
Window.onload=function () {
Skin.setskin (Skin.readcookie ());//Set skin style based on read cookie return value
Skin.addevent ()//Bind button Event
