jQuery

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.

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);
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *