[Switch] Page skin replacement function analysis

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 (The onclick event is added for each Li in the background 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 the cookie, select the button, and the page skin is skin. setskin = function (n) {var skins = $ ("skin "). getelementsbytagname ("Li"); for (I = 0; I <skins. length; I ++) {skins [I]. classname = ""; // initialization button status} skin. setcookie (n); // Save the current style $ ("skin _" + n ). classname = "selected"; // sets the style of the selected skin button $ ("cssfile "). href = "CSS/main" + N + ". CSS "; // set the page style}

2. Access cookies

// Store the current skin n to cookieskin. setcookie = function (n) {var expires = new date (); expires. settime (expires. gettime () + 24x60x60*365*1000); var flag = "skin_cookie =" + N; document. cookie = Flag + "; expires =" + expires. togmtstring ();} // return the skin style skin set by the user. 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 skin. addevent () according to the return value of the read cookie; // bind button event}

 

[Switch] Page skin replacement function analysis