JS - Stylesheet Toggle

a little bit of Javascript and viola! you have changed the look and feel of your page ...


Code Library »  

Toggle the CSS Stylesheet

Default Style »    United Style »    Cyborg Style »    Flatly Style »    Slate Style »    Readable Style »    Superhero Style »

All the above alternate CSS stylesheets are provided by Bootswatch. Freely downloadable.

Change CSS Using Javascript

There are a few steps involved to being able to dynamically switch between different cascading stylesheets or CSS. I'll go through each step and provide the code to help you get your project headed in the right direction. Remember, alternating to different style sheets doesn’t mean you can only change colors. You can change the complete style of your page if you wish.

Pay attention to the colors and formatting of the text. Just click one of the style buttons above and watch what happens to the page. This is all done with Javascript and CSS!

The Finished Product

How It's Done

Adding The Javascript Code

To start, lets’s assume you have two different style sheets you want to offer your visitors to choose. Assuming you already have your first or default stylesheet already linked in the <head> section, you will need to link your secondary or alternate stylesheet.

<head> Section

First, you will need to add the "title" parameter to all .css <link> statements using a descriptive word. It could be most anything, (ex.: alternate1, alternate2, ...), You will also need to add the word "alternate" to the rel= parameter such as, rel="alternate stylesheet". See the complete structure below.

You can add as many as you want. Below, I show you how to get started using a default and one alternate stylesheet. I have six alternate stylesheets within this page.

HEAD Section

<link href="css⁄style-A.css" rel="stylesheet" title="default"⁄>
<link href="css⁄style-B.css" rel="alternate stylesheet" title="alternate1"⁄>

HTML - Form

To provide a way for your visitors to select the alternate theme or CSS stylesheet is next. Different ways you can go about this, like using text links, radio buttons or even selection boxes. I chose to use an <a> tag. And, with a little Javascript onlick="css_switch('id tag here') return false; does all the work. The return false; doesn't allow the '#' to appear on the address bar.

HTML Section

<a id="default" class="btn" onclick="css_switch('default'); return false" href="#">style-A »<⁄a>   
<a id="alternate1" class="btn" onclick=" css_switch('alternate1'); return false" href="#">style-B»<⁄a>

When the visitor clicks either button, the Javascript onclick handler, css_switch(), will run. The function will be passed either 'default' or 'alternate' as its parameters, depending on which button is clicked. The words "default" and "alternate" correspond to the title attributes for the link elements referencing the style sheets.

Javascript Function

Below is the actual Javascript code needed to pull off this trick. You can place the code in the <head> section between the opening and closing <script> tags, or you can do what I did and create a new external file and call it from your <head> page. I called my file, 'styleswitcher.js' and placed it in its own 'js' folder . This is a free world, you can call it anything you want. I'll show you how to call the external file a little later.

JAVASCRIPT Code  ⁄* enables the visitor to select alternate css stylesheets */

function css_switch ( css_title )
{
  var i, link_tag;
  for (i = 0, link_tag = document.getElementsByTagName("link");
    i < link_tag.length; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false;
      }
    }
  }
}

The css_switch() function essentially iterates through all your link tags looking for a style sheet with the same title as the text specified in its argument (parameter). If it matches, it sets a special property, called disabled, to false, thus enabling that style sheet. In the meantime, all other relevant style sheets are disabled. The function ignores all persistent style sheets as well as any non-style-sheet link tags, such as those used for your site's favicon. So, theoretically, you could have as many alternate stylesheets as you wish. But remember, less is more...

External Javascript Call

I mentioned earlier that I decided to create an external Javascript file. If you are unsure how to make that call, I show you how easy it is below. It only takes one extra line of code that is called from the <head> section of your html file. Here's what you do...

HEAD Section

<head>
   <script src="js⁄styleswitcher.js" type="text⁄javascript"><⁄script>
<⁄head>

That's all there is too it. Just remember where you stored the file. I created a folder called 'js' and stored my javascript file there.