JavaScript + CSS enable webpage 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>

JavaScript 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; i0; 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

// 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 = mycook Ie. 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

4. Set skin style after page loading

Window. onload = function () {skin. setSkin (skin. readCookie (); // set the skin style skin. addEvent () based on the return value of the read cookie; // bind the button event