jQuery: CSS Stylesheet Switcher

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.