Dynamically call the css file -- jquery app _ jquery

Dynamic call of css file -- jquery application is translated, the original article: http://15daysofjquery.com/style-sheet-switcheroo/12/

It can be applied to a wide range of websites, especially websites with standard architecture. For example, pjblog can be used. with simple clicks, the website can be changed instantly, of course, it can be implemented through other methods. jquery is used here. The advantage is that the Code is concise and readable.
First put the code

The Code is 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 ('stylename, 365 );
}

Here we will explain:

The Code is as follows:

$ ('. Styleswitch'). click

This statement defines click events for all objects whose classname is styleswitch. In jquery, "#" is used to represent the id, for example, $ ("# my_id ") you can locate the object whose id is my_id and the classname is ". ", while positioning tagName without any modifier, such as $ (" p "), is to locate all p objects

ReadCookie and createCookie are two custom functions, which are not provided here

The Code is as follows:

$ ('Link [@ rel * = style] '). each (function (I)

The meaning of this sentence is to locate the link tag, which has the rel attribute, and the rel attribute should contain the style, and define the function for each such object.

The Code is as follows:

This. disabled = true;

The meaning of this sentence is to invalidate the current object

The Code is as follows:

Function switchStylestyle (styleName)
{
$ ('Link [@ rel * = style] [@ title] '). each (function (I)
{
This. disabled = true;
If (this. getAttribute ('title') = styleName) this. disabled = false;
});
CreateCookie ('stylename, 365 );
}

This function is used to select the current style.
$ ('Link [@ rel * = style] [@ title] '). each (function (I)
With the previous knowledge, it is easy to understand this sentence, that is, all labels named link, including the rel attribute, and the rel attribute should contain the style, at the same time, there are also objects with the title attribute, and each of them executes the corresponding function.

Next let's take a look at the content on the home page.

The Code is as follows:

Rel = "alternate stylesheet", so that the current css will not be applied to the current document, but it is only a backup

The Code is as follows:

Styles1

Styles2

Styles3

These are the code to change the style part after clicking, we noticed that there are rel attributes, class attributes, these are examples of convenient positioning: http://www.healdream.com/upLoad/html/jquery/styleswitch/

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