How to switch to an alternate stylesheet using jQuery
Learn how to switch stylesheets with this jQuery based plugin. Simple,easy and effective. Also learn how to group different types of stylesheets and switch between em.
Recently I have been working on a project which involved switching of stylesheets. You must have seen couple of websites which easily change their entire design’s color by just simple clicking on a button/link. So it more or less means, the visitor can change the CSS of the site by selecting an alternate stylesheet by a simple click of a button 
This “How to” will show you how to switch stylesheets of a website using jQuery. As you must have realized, if javascript is disabled, then this method won`t work 
So whats the big deal with switching Stylesheets ?
This gives your visitors the flexibility to select thier choice of looks/colors as required. It kinda adds to the interaction element between your website and the visitor. Using different CSS you can change the color/looks of your website, and with this plugin you can change it in a snap
Plugin Documentation
This Documentation is based on the demo files included with this tutorial. The plugin file is included in the Demo.
This plugin allows you to group stylesheets together, for example, you may want a group of stylesheets which only changes the color-scheme of the website and another group of stylesheets which changes the font-scheme of the website, so you can use the variable “seperator” to a group a list of stylesheets together.
-
Search for CSS with having a “seperator” in the title
Here the seperator = color
As in the following code it can be seen, I have grouped green.css and blue.css as 2 stylesheets which will change the color-scheme of my website. Since I don`t want any other stylesheets to be disabled or enabled apart from these two, I group em under “color”. So I include “-color” in the title along with a name to identify the correct stylesheets.<!-- default stylesheet which will be loaded --> <link href="red.css" type="text/css" rel="stylesheet" /> <!-- alternate stylesheets which won`t be loaded unless selected --> <link href="green.css" type="text/css" rel="alternate stylesheet" title="green-color" /> <link href="blue.css" type="text/css" rel="alternate stylesheet" title="blue-color" /> $(document).ready(function(){ $(".changecolor").switchstylesheet( { seperator:"color"} ); }); <a href="#" class="changecolor" title="red-color">Red</a> | <a href="#" class="changecolor" title="green-color">Green</a> <a href="#" class="changecolor" title="blue-color">Blue</a> -
Example 2
Here the seperator = text
In this example, I wanted to group stylesheets which changes the font size of my website.<!-- default stylesheet which will be loaded --> <link href="smalltext.css" type="text/css" rel="stylesheet" /> <!-- alternate stylesheets which won`t be loaded unless selected --> <link href="medtext.css" type="text/css" rel="alternate stylesheet" title="med-text" /> <link href="bigtext.css" type="text/css" rel="alternate stylesheet" title="big-text" /> $(document).ready(function(){ $(".changetext").switchstylesheet( { seperator:"text"}); }); <a href="#" class="changetext" title="small-text">Small font</a> <a href="#" class="changetext" title="med-text">Medium font</a> <a href="#" class="changetext" title="big-text">Large font</a>
The above two examples show that I can use both of them together in one HTML file thus not disturbing each other’s alternate stylesheets. This way you can have various groups of alternate stylesheets.
How to use ?
-
Download the DEMO files.
You might have noticed, the plugin file is
switchstylesheet.js -
Include jQuery and the plugin
Include the above file along with
jQueryin the<head>...</head>section of your file.<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="switchstylesheet.js" type="text/javascript"></script> -
Link alternate stylesheets
Link all your alternate stylesheets in the
<head>...</head>section of your HTML and remember to give it the following 2 attributestitle– The title helps relate the link with the proper stylesheet to be activated.rel="alternate stylesheet"– Very important, so these stylesheets are not activated by default.
<link href="blue.css" type="text/css" rel="alternate stylesheet" title="blue-color" /> <link href="green.css" type="text/css" rel="alternate stylesheet" title="green-color" /> -
Add the javascript
Now that you are all set, let Javascript do the rest. Simple write a small call to our new snippet.
$(the_selector).switchstylesheet();.The
the_selectorin our case would be.changecolor.Just include the following code inside the
<head>...</head>$(document).ready(function(){ $(".changecolor").switchstylesheet( { seperator:"color"} ); }); -
Finally the Links to change the stylesheet
<a href="#" title="green-color">Green</a> | <a href="#" title="blue-color">Blue</a>Please Note : The
titleattribute in the links should be the same as the ones specified in your alternate stylesheets (CSS). Secondly note thatrel = "alternate stylesheet".
Conclusion
Like always, if you have any doubts, do post a comment here. Cheers
About the Author
Enjoyed the Article ?
Hi,
Could you please show an example of Switching with <select> onchange
Is there a way that these changes can be maintained if the user navigates to another page?
HI, great post… It is what i'm searching for my blog.
Excellent article – I really appreciate your knowledge about web development, I have
bookmarked it for later viewing and forwarded it on.
To view more details in web development, visit http://www.netultimate.com