The realization of the Web page skin-changing function method detailed

The need for a Web page to be ready for skin change

First you may want to prepare a number of CSS style sheet files, when the click on the Skin button, use JS to switch the corresponding CSS style sheet. After that, is to add a list of UL Li on the Web page, decorate with CSS to make the skin changing option. For example:

Here we will look at the specific function code.

Realize the click Switch corresponding CSS function
First of all, the HTML structure of our skin options is like this

The code is as follows	Copy Code
<div class= "Skin" > <ul> <li class= "skin1 hover" ></li> <li class= "Skin2" ></li> <li class= "Skin3" ></li> <li class= "Skin4" ></li> </ul> </div>

Then put an empty link tag on the top of the page, and we'll use jQuery to give the link tag a different CSS file for switching effects.

The code is as follows	Copy Code
<link rel= "stylesheet" href= "data-href=" Style-teal.css "type=" text/css "media=" screen "class=" Skincsslittle "/ >

Among them, I have customized a Data-href property to store the system's default skin, so that when the page is finished loading, if JS does not detect the skin information in the Cookie, it will assign the contents of the Data-href. Then there is the familiar JQuery code:

code is as follows

copy code

JQuery ('. Skin li '). Click (function () {     var currentclass = JQuery (This). attr (' class ');     JQuery (this). Siblings (). Removeclass (' hover ');     JQuery (this). addclass (' hover ');     var cc = currentclass.substring (0,5);     cc = Convertcsslittle (cc);     var skincssurl = JQuery ('. Stylecssurl '). attr (' href '). substring (0,jquery ('. Stylecssurl '). attr (' href '). IndexOf (' style ') + cc;     jQuery ('. Skincsslittle '). attr ("href", skincssurl);     createcookie (' skin ', currentclass,365); });

The general logic is to get the class of the current skin and then intercept it skin* and then use a function to get its corresponding CSS file. Skincssurl Records is the Web page of the non-skin CSS file, mainly used to get the current page of the CSS directory URL, and finally the combination of good CSS skin file assignment ready for the empty link, the realization of skin change.

Add cookies to record skin function
Two custom functions are used here to create and read Cookie content.

The code is as follows

Copy Code

function Readcookie (name) { var Nameeq = name + "="; var ca = Document.cookie.split (';'); for (Var i=0;i < ca.length;i++) { var c = Ca[i]; while (C.charat (0) = = ') c = c.substring (1,c.length); if (C.indexof (nameeq) = = 0) return c.substring (nameeq.length,c.length); } return false; } function Createcookie (name,value,days) { if (days) { var date = new Date (); Date.settime (Date.gettime () + (days*24*60*60*1000)); var expires = "; Expires= "+date.togmtstring (); } else expires = ""; Document.cookie = name+ "=" +value+expires+ "; path=/"; }

You just need to copy these two functions to the JS code area. In the JQuery-click function code, the last sentence creates a cookie, and when the page is loaded, we need to use JS to read the cookie content and then use if to judge:

The code is as follows

Copy Code

var CCCC = Readcookie ("Skin"); if (CCCC) {     CCCC = cccc.substring (0,5);     jQuery ('. ') +CCCC). addclass (' hover '). Siblings (). Removeclass (' hover ');     CCC = Convertcsslittle (CCCC);     var skincssurl = JQuery ('. Stylecssurl '). attr (' href '). substring (0,jquery ('. Stylecssurl '). attr (' href '). IndexOf (' style ') + CCC;     jQuery ('. Skincsslittle '). attr ("href", skincssurl); }else{     var currentcss = JQuery ('. Skincsslittle '). attr ("Data-href");      var currentcssname = currentcss.substring (Currentcss.indexof (' style '), currentcss.length);     currentcssname = Defaulttoclass (currentcssname);     jQuery ('. ') +currentcssname). addclass (' hover '). Siblings (). Removeclass (' hover ');     jquery ('. Skincsslittle '). attr ("href", jquery ('. Skincsslittle '). attr ("Data-href")); }

To be stunned by this messy code, the logic is simple, first get the skin value of the Cookie, if there is for the corresponding skin options highlighted and converted to the corresponding CSS skin file assignment. If there is no Cookie content, the value that is recorded in the Data-href property is assigned.