Dynamic invocation of CSS file--jquery application _jquery

Translate it, the original: http://15daysofjquery.com/style-sheet-switcheroo/12/

Can be applied to a wide range, especially with the standard framework of the site, such as Pjblog can, as long as through a simple click, you can let the site in an instant to change the skin, of course, can be achieved through other methods, here through jquery to achieve, the advantage is that the code concise, readable
Put the code First

Copy Code code as follows:

$ (document). Ready (function ()
{
$ ('. Styleswitch '). Click (Function ()
{
Switchstylestyle (This.getattribute ("rel"));
return false;
});
var c = Readcookie (' style ');
if (c) Switchstylestyle (c);
});

function Switchstylestyle (stylename)
{
$ (' link[@rel *=style] '). Each (function (i)
{
This.disabled = true;
if (This.getattribute (' title ') = = StyleName) this.disabled = false;
});
Createcookie (' style ', stylename, 365);
}

here is a description:

Copy Code code as follows:

$ ('. Styleswitch '). Click

This sentence is to all classname for Styleswitch object definition Click event, in jquery with "#" for the ID, such as $ ("#my_id") can be located to the object ID my_id, positioning classname as ".", Positioning tagname, for example, does not add any modifiers, such as $ ("P"), and is positioned to all P objects

Readcookie and Createcookie are two custom functions that are not given here

Copy Code code as follows:

$ (' link[@rel *=style] '). Each (function (i)

The meaning of this sentence is to navigate to the link tag, which has the Rel attribute, and the Rel attribute contains style, which makes the function for each of these objects.

Copy Code code as follows:

This.disabled = true;

This means that the current object is invalidated

Copy Code code as follows:

function Switchstylestyle (stylename)
{
$ (' link[@rel *=style][@title] '). Each (function (i)
{
This.disabled = true;
if (This.getattribute (' title ') = = StyleName) this.disabled = false;
});
Createcookie (' style ', stylename, 365);
}

The role of this function is to select the current style
$ (' link[@rel *=style][@title] '). Each (function (i)
With the knowledge in front, this sentence should be not difficult to understand it, that is, all tags named link, contains the Rel attribute, and the Rel attribute to include style, but also have the title attribute of the object, each of which performs the corresponding function

Let's look at the contents of the main page

Copy Code code as follows:

<link rel= "stylesheet" type= "Text/css" href= "Styles1.css" title= "styles1" media= "screen"/>
<link rel= "Alternate stylesheet" type= "Text/css" href= "Styles2.css" title= "Styles2" media= "screen"/>
<link rel= "Alternate stylesheet" type= "Text/css" href= "Styles3.css" title= "Styles3" media= "screen"/>

Here rel= "Alternate stylesheet", so that the current CSS will not be applied to the current document, but only the standby

Copy Code code as follows:

<li><a href= "Serversideswitch.html?style=style1" rel= "styles1" class= "Styleswitch" >styles1</a> </li>
<li><a href= "Serversideswitch.html?style=style2" rel= "Styles2" class= "Styleswitch" >styles2</a> </li>
<li><a href= "Serversideswitch.html?style=style3" rel= "Styles3" class= "Styleswitch" >styles3</a> </li>

These are the code that changes the Style section after clicking, and we notice that there are REL attributes and class attributes that are examples of easy positioning: http://www.healdream.com/upLoad/html/jquery/styleswitch/

Download: http://www.51files.com/?YTXG82NKA8FA6TIKE4M0