Switching stylesheets may be necessary to accommodate different screen resolutions, or entirely different look ‘n’ feel of web page .
It really helps in complex styles where more no of styles are included.
Include the following jQuery script to the header section of your HTML file.

<script type="text/javascript">
$(".cssswitch").click(function() {
$(‘link[rel=stylesheet]‘).attr(‘href’ , $(this).attr(‘rel’));
});
</script>

If you are referring your default stylesheet like below :

<link rel="stylesheet" href="greentheme.css" type="text/css">

For switching the styles, just assign the cssswitch class to an HTML element & use the rel attribute to reference the location of your stylesheets.

<a href="#" class="cssswitch" rel="greentheme.css">greentheme</a>
<a href="#" class=" cssswitch " rel="bluetheme.css">bluetheme(new one)</a>

Clicking on the second link above (blue theme) will modify the DOM in such a way that the href attribute will take on the value of bluetheme.css.

Related posts:

  1. How to get the values of the selected checkboxes into an Array using Jquery