JQuery frontend website style switching _ javascript skills

This article describes how to use JQuery to switch styles on the front-end of a website in WordPress. Or the method in this article may not be too necessary, because I think this is the final means to solve the cause and result of my almost split by the theme style. However, if you want to add more styles for the website to allow visitors to choose from, or if you want to adjust the style of the website and let the visitor reflect it before making a decision, this is also a good way to save the trouble of switching themes.
For the switching effect, refer to this site.
1. Code of the switch style button:

The Code is as follows:

• Day


• Night

The above button code should be placed according to your website design. For example, I put it in the header. php file.
2. style reference code:

The Code is as follows:

Here I will briefly describe:
Because in the subsequent js Code, a cookie record "style" will be written in the cookie section of the browser, so here I will ask the browser to call the style based on the record (here there are two styles, one "white" and the other "black ").
.
Hosts file.
It should be added that the use of PHP cookies for reading is more effective than the use of js cookies for reading. Because I used to use js for cookie reading, but it still takes a little time to load js, it is not perfect in page browsing after switching the style. If you have previously discovered that when you select a black topic and then browse the page, a white topic appears for an instant, and then a black topic appears. This is what I want to explain. PHP code is no longer used.
3. Some Javascript code: (Note that you have already called the JQuery library on your website)

The Code is as follows:

(Function ($)
{
$ (Document). ready (function (){
$ ('. Styleswitch'). click (function (){
$ ('Body'). append ('

');
$ ('# Overlay ')
. Css ({
Display: 'none ',
Position: 'absolute ',
Top: 0,
Left: 0,
Width: '200 ',
Height: '20140901 ',
ZIndex: 1000,
Background: 'black'
})
. FadeIn (500 );
SwitchStylestyle (this. getAttribute ("rel "));
$ ('# Overlay'). fadeOut (500 );
Return false;
});
});
Function switchStylestyle (styleName)
{SetTimeout (function (){
$ ('Link [@ rel * = style] [title] '). each (function (I)
{
This. disabled = true;
If (this. getAttribute ('title') = styleName) this. disabled = false;
}) ;}, 500 );
CreateCookie ('stylename, 365 );
}
}) (JQuery );

The above section is the click action section. I added a section # overlay block style in the middle to make a lightbox effect during the switching process, which is more natural than sudden switching.
Then you need to add the code that generates the cookie record:

The Code is as follows:

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 var expires = "";
Document. cookie = name + "=" + value + expires + "; path = /";
}

You can also add or delete a cookie record:

The Code is as follows:

Function eraseCookie (name)
{
CreateCookie (name, "",-1 );
}

Now, we can complete the above three parts. I hope you can understand them.