Stylesheet switching demonstration

Navigation

Skip navigation.

Site search

Site navigation

Other links

Details and download

Switcher scripts

To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.

The script is held in a JavaScript header file, and is able to use a cookie to remember the user's choice of stylesheets. In this case, I have chosen to remember that choice only until the browser is closed. Note that I only set this cookie when the page is unloaded. In some browsers, that event only fires when you click a link, not when you reload or go back.

If you are interested, I have also written an alternative version, which uses the document.styleSheets collection wherever possible. It is not so efficient as this version, and I do not recommend its use on real pages, but you may want to download it for educational purposes only.

Demonstration

The demo page is held here inside an inline frame:

Important: some browsers - most notably Opera - do not fire the onunload event when the page is reloaded, and will only fire it when the user clicks a link or submits a form. The normal configuration for this script saves the settings cookie onunload. However, you may need the style preference to be stored even if the page is reloaded. If this is the case, you should call the rememberStyle function immediately after you set the style using the changeStyle function.

Stylesheets in the demo

This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.