Implement the webpage skin replacement function, JavaScript + CSS

Javascript + CSS enable webpage skin replacement

Principle: By accessing cookies and Dom operations, different style sheet files are called to enable front-end Skin replacement.

HTML code:

1. To have a style sheet link with ID, we need to call different href through this link.

<Link href = "CSS/main0.css" rel = "stylesheet" type = "text/CSS" id = "cssfile"/>

2. Skin selection button (added for each Li in the backgroundOnclickEvent to trigger skin replacement)

<Ul id = "skin">
<Li id = "skin_0" Title = "gray"> gray </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 cookie, select button, page skin
Skin. setskin = function (n ){
VaR skins = ("skin"). getelementsbytagname ("Li ");
For (I = 0; I <skins. length; I ++)
{
Skins [I]. classname = ""; // initialize the button status
}
Skin. setcookie (n); // Save the current style
("Skin _" + n). classname = "selected"; // you can specify the style of the selected skin button.
("Cssfile"). href = "CSS/main" + N + ". CSS"; // set the Page Style
}

2. Access cookies

// Save the current skin n to the cookie
Skin. setcookie = function (n ){
VaR expires = new date ();
Expires. settime (expires. gettime () + 24x60x60x365*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, the default style is displayed.
}
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 a 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 loading

Window. onload = function (){
Skin. setskin (skin. readcookie (); // set the skin style based on the returned value of the read cookie.
Skin. addevent (); // bind button event

Source: Blue ideal