Javascript + CSS enable webpage skin replacement

Principle: By accessing cookies and Dom operations, different style sheet files are called to enable foreground skin replacement. Skin replacement example download: sour.rar html Code Part: 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 to the background for each Li 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 and select the button Status, page 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 cookie // Save the current skin n to cookieskin. setcookie = function (n) {var expires = new date (); expires. settime (expires. gettime () + 24x60x60*365*1000); var flag = "ski N_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. substrin G (START, end); If (values! = NULL) {Skin = values;} return skin;} 3. bind the skin replacement 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. after the page is loaded, set the skin style window. onload = function () {skin. setskin (skin. readcookie (); // set the skin style skin based on the returned value of the read cookie. addevent (); // bind button event