44 Votes

jQuery: CSS Stylesheet Switcher

Tutorial by Stefan Trost | Last update on 2022-12-25 | Created on 2012-07-17

In this tutorial, I will show you how you can implement a CSS Style Sheet Switcher on a website with a few lines of code, JavaScript and jQuery.

In the example, we have three different CSS styles from which the user can choose by clicking a link.

In the following I will show you the necessary HTML and jQuery code:

HTML: CSS Integration

First, we integrate our standard CSS. We are doing this as we are used to integrate CSS stylesheets in the head of our website:

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

This style sheet is loaded when the user visits our site for the first time.

HTML: Links to Style Sheets

Next, we need to include the links to our stylesheets in our website. Whenever the user clicks on such a link, the corresponding style is loaded:

<a href="#" class="switchcss" rel="style.css">Normal</a>  
<a href="#" class="switchcss" rel="style1.css">Design 1</a>  
<a href="#" class="switchcss" rel="style2.css">Design 2</a>  

We can put the links at any place of our website.

All links are marked with the class "switchcss". This allows us to address the links later with jQuery. Overall, in this example, we are providing 3 different designs, which obviously require 3 CSS files, which we have named "style.css", "style1.css" and "style2.css" here. The first link ("normal") should restore the default theme ("style.css"), the other two links are used to allow the user to apply  "Design 1" (style1.css) and "Design 2" (style2.css).

JavaScript: jQuery Code

Finally, we need a little bit of jQuery to implement our plan:

$(document).ready(function() {  
   $("a.switchcss").click(function() {  
     $("link[rel=stylesheet]").attr('href' , $(this).attr('rel'));
     return false;  

Our jQuery code does the following: with "a.switchcss" we select all links (a), where the class "switchcss" was assigned. These are exactly our 3 links that we have defined above.

Then, we change the OnClick Event of these links: If we click on one of these links, the element "link[rel=stylesheet]" will be changed. That is exactly the element in which we have declared our default style sheet for the beginning in the head. In detail, we are changing the attribute "href" (in this the link to the CSS file is specified) to the "rel" attribute from the link. And in this "rel" attribute of the link, we have specified our different style sheet versions.

With this, our CSS style switcher using jQuery is ready! If we now click on a link, the corresponding style sheet is loaded. Of course all of the names, links and the number of stylesheets used in this tutorial can be arbitrarily changed and adapted according to your needs.

22 Votes

I think, that is a very good tutorial and all things are explained in a good way. But I also see a problem: the script does not recognize the selected style sheet. So, the selection will be lost, as soon as the user is browsing to the next page of your website. On this page, the user has to choose the style sheet again.

It would be better to save the selected style sheet, for example with the help of a cookie, to load it again on the next page. On this website, there is a solution for that.
2012-07-19 at 21:34

ReplyPositive Negative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.