Dynamically calling css files - application of jquery

Dynamically calling css files - application of jquery_jquery

WBOY

Release： 2016-05-16 19:18:54

Original

984 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:

$('.styleswitch').clickThis sentence defines click events for all objects whose classname is styleswitch. In jquery, use "#" to represent the id. For example, $("#my_id") can locate the object with the id my_id and the classname "." , and positioning tagName does not add any modifiers, such as $("p"), which means locating all p objectsreadCookie and createCookie are two custom functions, which are not given here

Copy code

The code is as follows:

$('link[@rel*=style]'). each(function(i) This sentence means to locate the link tag, which has a rel attribute, and the rel attribute must contain style, and formulate a function for each such object

Copy code

The code is as follows:

this.disabled = true; This sentence means to invalidate the current object

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:

styles1

styles2

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