4 4 Votes

jQuery: CSS Stylesheet Switcher

Tutorial by Computer Expert | 17/07/2012 at 16:25

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.

ReplyPositiveNegative

Axuter

Show Profile | Message
Avatar
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.
19/07/2012 at 21:34

ReplyPositive Negative
Reply

About the Author

Avatar AuthorThe author has not added a short description to his profile yet.
Show Profile | Message

 

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.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.