How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

by Christopher Heng, thesitewizard.com

It may be useful sometimes to provide your visitors with the option to change the appearance of your website. Perhaps you may want to provide theme support for your site. Or you may simply want to provide a bigger font size version of your site for older users who may not be able to read the small-sized text you use by default. This article describes how you can use JavaScript to dynamically change the cascading style sheets, or CSS, of your website.

Prerequisites

One of the assumptions I will make in this tutorial is that you know how to write HTML and CSS. You do not have to be highly proficient in either of these, but you should have at least a basic working knowledge. Some JavaScript knowledge is also necessary.

If you have not already done so, you may want to read the following articles as well. This guide was written as the part of a series of articles on how to provide alternate style sheets for your website and change them.

How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes. It deals with the CSS aspect of switching style sheets.
How to Use Cookies in JavaScript. Although not strictly part of the CSS style switcher series, the cookie management code provided in that article is used to preserve the theme selection that your visitors make on your site. Without setting a cookie, their CSS setting will not be retained when they go to the other pages on your website.

Steps to Adding a Style Sheet Switcher in JavaScript

Let's assume that we have the following style sheets defined in our HEAD section. This is the same code described and explained in the first instalment of this tutorial.

<link rel="stylesheet" type="text/css" title="blue"
    href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
    href="http://example.com/css/pink.css">

HTML Code to Provide a Way for Your Users to Choose the Style Sheet

You will need to provide some way for your visitors to select the theme or CSS they want. There are many ways to do this, including the use of radio buttons, drop down selection boxes, normal submit buttons, text links, and so on. For usability reasons, you should not use things like checkboxes which suggests to users that they can simultaneously select a few themes and have them work together.

Here's an example of HTML code using normal submit buttons.
```
<form>
<input type="submit"
  onclick="switch_style('blue');return false;"
  name="theme" value="Blue Theme" id="blue">
<input type="submit"
  onclick="switch_style('pink');return false;"
  name="theme" value="Pink Theme" id="pink">
</form>
```
When the visitor clicks any of the radio buttons, the JavaScript onclick handler, switch_style(), will run. The function will be passed either 'blue' or 'pink' as its parameters, depending on which buttons is clicked. The words "blue" and "pink" correspond to the title attributes for the link elements referencing the style sheets.

JavaScript Function to Change Style Sheets

The actual JavaScript code needed to implement CSS style switching can be found below. If you find it difficult to cut/copy the code, it probably means that you are using IE 6. Please see my Copy/Paste Problems FAQ for a workaround.

// *** TO BE CUSTOMISED ***

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

// *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remote this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
  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 ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

Note that this script includes the set_cookie() and get_cookie() functions from the How to Use Cookies in JavaScript article. For your convenience, I have already included those functions in the block of code above, so you do not need to copy and paste from that article. However, you may still want to read that article to understand the default settings and assumptions I make in my cookie code.

The switch_style() 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.

When it finishes, it sets a cookie with the necessary information about the style sheet setting. By default, the name of the cookie is "style" and it is retained for 30 days. You can change this by altering the values of the style_cookie_name and style_cookie_duration variables at the start of the script.

To ensure that the visitors' style sheet settings remain when they visit other pages of your site, as well as when they reload the page, you will also need to add an onload attribute to your web pages' body tag. For example, change <body> to the following:

<body onload="set_style_from_cookie()">

This causes the browser to run the set_style_from_cookie() function when the page is loaded. The function merely checks for the style-setting cookie, and if present, switches the style sheets accordingly. Otherwise, it does nothing.

Demo

You can check out how the script works using the test copy loaded with this page. To change between the current style sheet used on thesitewizard.com and the older version, simply select the appropriate button below.

Note that the code used for this demo sets a cookie called "demo_theme" in your browser that is valid for only 1 day. The cookie will contain either the word "blue" or "grey", depending on which button you click. Your setting will only affect this page, and no other page on this site, since none of the other pages include the style switcher JavaScript code.

Browser Compatibility

The above code has been tested in IE 6, 7, Opera 9, Firefox 2 and Safari for Windows 3.1. It should (hopefully) work for all newer browsers as well.

Conclusion

This chapter concludes the series on creating a theme switcher, to change style sheets, using both CSS and JavaScript.

Copyright © 2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation.

You are here: Top > JavaScript Programming Tutorials and Free JavaScripts > How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

Other articles on: CSS, HTML, JavaScript

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

New Pages

Popular Pages

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as:

How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

JavaScript Style Switcher for CSS

How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

Prerequisites

Steps to Adding a Style Sheet Switcher in JavaScript

HTML Code to Provide a Way for Your Users to Choose the Style Sheet

JavaScript Function to Change Style Sheets

Demo

Browser Compatibility

Conclusion

thesitewizard™ News Feed (RSS Site Feed)

Please Do Not Reprint This Article

Related Pages

New Pages

Popular Pages

How to Link to This Page