jQuery: how do I create a toggle between two stylesheets?

I have two CSS stylesheets开发者_Go百科, how do I toggle between them using a single onclick element?

The elements would be:

• stylesheet_a.css
• stylesheet_b.css
• a DIV element with ID of "css_toggle"

This is the general idea:

1. Bind a click() event to css_toggle - $('#css_toggle').click(event_handler);
2. Within the event handler, change the src attribute of your stylesheet

More detail and code can be found in the following tutorial - http://frinity.blogspot.com/2008/06/switch-css-stylesheets-using-jquery.html

Say you have these elements:

<link id=a rel="stylesheet" href="stylesheet_a.css" type="text/css">
<link id=b rel="stylesheet" href="stylesheet_b.css" type="text/css" disabled>

If you will add this script:

$("#css_toggle").click(function() {
  var isOff = $("a").get(0).disabled;
  $("a").get(0).disabled = !isOff;
  $("b").get(0).disabled = isOff;
});

it should do what you want. Not tested, but idea should be clear.