How to Implement the webpage skin replacement function

In the past, we often saw a website with the webpage skin replacement function. Today I will introduce how to skin the webpage. Here we mainly use the css + js cookies for operations, the following is a detailed introduction.

Preparations required for webpage skin replacement

First, you may need to prepare multiple sets of CSS style sheet files. When you click the skin change button, use JS to switch the corresponding CSS style sheet. Then, add a ul li list on the webpage and use CSS to modify it to make the skin replacement option. For example:

Next we will look at the specific functional code.

Click to switch the corresponding CSS Function
First, the HTML structure of our skin options is as follows:

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, place an empty link tag at the bottom of the top of the page. We will use jQuery to assign different CSS files to the link tag for switching.

The Code is as follows:	Copy code
<Link rel = "stylesheet" href = "" data-href = "style-Teal.css" type = "text/css" media = "screen" class = "skincsslittle"/>

Specifically, I have customized a data-href attribute to store the default skin of the system. In this way, after the page is loaded, if JS does not detect the skin information in the Cookie, the content in data-href is assigned a value. Then there is the familiar jQuery code:

The 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 obtain the class of the current skin, extract the skin *, and use a function to obtain the corresponding CSS file. Skincssurl records the non-skin CSS file of the webpage. It is mainly used to obtain the CSS directory URL of the current webpage. Finally, the mixed CSS skin file is assigned to an empty link ready for skin replacement.

Added the Cookie record skin function.
Two custom functions are used to create and read cookies.

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 * 24x60*60*1000 )); Var expires = "; expires =" + date. toGMTString (); } Else expires = ""; Document. cookie = name + "=" + value + expires + "; path = /"; }

You only need to copy the two functions to the JS Code area. In the functional code of jQuery click skin replacement, a Cookie is created in the last sentence. After the webpage 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 ")); }

In fact, the logic is very simple to get the Cookie skin value. If there is a Cookie, highlight the corresponding skin option and convert it to the corresponding CSS skin file. If no Cookie content exists, the value recorded in the data-href attribute is assigned.