How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically (www.imagination.gs)
(www.imagination.gs)
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
Lets 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.
href="http://example.com/css/blue.css">
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.
Heres an example of HTML code using normal submit buttons.
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 sites 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 to the following:
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.
by Christopher Heng,
(www.imagination.gs)