Switch Stylesheets With jQuery

gnome-session-switch

Jquery makes it very easy to manipulate the the DOM, this makes it so easy to change any element on your webpage.

One of those elements is the reference to your stylesheet, so using jQuery you can easily switch between different stylesheets.

But why would you want to switch between different stylesheets?

There are many different reasons to switch between stylesheet one of the most common is for accessibility. Many websites allow users to pick the font size displayed on the page but what if changing the font size will push your layout out and your website won't look the same any more. You can assign a different stylesheet for different font sizes so you can make sure that your website will always look good and it doesn't matter what the font size is.

What if you have a website which has a lot of colour and your visitors will prefer to have a normal black and white page then you can have a stylesheet just for black and white pages.

You can even have some fun with stylesheets and completely change the look of the website using the same DOM elements and allow your visitors to pick the layout they use.

You can do so many things with just changing the stylesheet, so in this article I am going to show you a quick and easy way you can change the style sheet by using jQuery.

In the demo page you are able to switch between 4 different stylesheets just by clicking on a button for the demo the stylesheet will just be changing the background colour of the page. You can also download the demo page to give it a go yourself.

Demo Download

The HTML

The HTML for the page is simple it just has the stylesheet link and four divs with id's to reference the style sheet they will be using.

<link rel="stylesheet" id="switch_style" href="">

<p>Use jQuery to easily change the stylesheet of your page.</p>

<p>Let your visitors choose your website styling.</p>

<h4>Pick one of the boxes below to change the stylesheet.</h4>

<p>The stylesheet has one property that is the change the body background colour.</p>

<div class="box" id="green"></div>

<div class="box" id="red"></div>

<div class="box" id="blue"></div>

<div class="box" id="yellow"></div>

The JQuery

Now we use the jQuery to change the the href of the switch_style element.

First we setup an on ready function which will run when the page is loaded, this will run the switch_style_click function which setups up the click event of the boxes.

As we have set a class on all the boxes we can use this and assign a click event to each element with the class box. All we have to do now is get the ID of the box by using the attr function and store this in a variable. Now we use the attr function again on the switch_style element to change the href to the new CSS file.

Copy and paste the below code into your JavaScript file.

(function ($j) {

  switch_style = {

    onReady: function () {      
      this.switch_style_click();
    },
    
    switch_style_click: function(){
    	$(".box").click(function(){
    		var id = $(this).attr("id");
    		
    		$("#switch_style").attr("href", id + ".css");    		
    	});
    },
  };

  $j().ready(function () {
	  switch_style.onReady();
  });

})(jQuery);

Demo Download

That's it you can now switch between different stylesheets.

Advertise here 50% Off

Comment