Home > Web Front-end > JS Tutorial > body text

Dynamically calling css files - application of jquery_jquery

WBOY
Release: 2016-05-16 19:18:54
Original
989 people have browsed it

It’s a translation, original text: http://15daysofjquery.com/style-sheet-switcheroo/12/

It can be applied to a wide range of applications, especially websites using standard architecture, such as Just say pjblog. With a simple click, the website can change its skin in an instant. Of course, it can be achieved through other methods. Here it is implemented through jquery. The advantage is that the code is simple and readable
Put the code first

Copy 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;
      }); 🎜>



Copy code

The code is as follows:


Copy code


The code is as follows:


Copy code

The code is as follows:



Copy the code


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('style', styleName, 365);
}


The function of this function is to select the current style
$('link[@rel*=style][@title]').each(function(i)
With the previous knowledge, this sentence It should not be difficult to understand, that is, all tags are named link, contain the rel attribute, and the rel attribute must contain style, and there must also be an object with the title attribute, each of which executes the corresponding function

Let’s take a look at the content of the main page

Copy the code The code is as follows:

< ;link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />



Here rel="alternate stylesheet", so that the current css will not be applied to the current document, but just a backup

Copy code The code is as follows:


These are the codes that change the style part after clicking. We noticed that there are rel attributes and class attributes, which are convenient for positioning. Example:
http://www.healdream.com/upLoad/html/jquery/styleswitch/

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template