Dhtml - Style Switcher

Combining CSS, javascript and the DOM enables us to switch style sheets on the fly.

This means the user can be given a choice in how they wish to view a webpage without reloading the page.

This technique makes use of different type of stylesheets, persistent and preferred.
'Preferred Stylesheets' are different from 'Persistent Stylesheets' in that they have a title attribute in the stylesheet's link tag

For example here is a Preferred Stylesheet as it would appear in the head of a document,
<link rel='stylesheet' title='evilbook' type='text/css' href='evilbook.css' />

We load all the preferred style sheets in the head of the document and use javascript to select the stylesheet the user chooses from a drop box.

Mike's Style Switcher Check it out and study the source code to see how this is done.


Exercise - For the adventurous among you - download the webpage and style sheets and see if you can add a new style of your own.