Mootools Styleswitcher (english)

Germany logo
It'a a funny thing. I was wondering, if there is nobody in the world, who is using the Mootools-properties for a css-styleswitcher like the one of Paul Sowden. So, I tried to program this by myself.

The basic idea behind it is simple. The mootools-framework has the function Asset.CSS. You can use this function to change all css-properties or change the whole css-file dynamically. This is a relative simple thing..

An additional point is, that the user has to switch it again, after he reloaded the page. To prevent this, we have to store the selected style into a cookie value, and read the cookie-value again, after the user reloads the page. The functions for this are in the mootools-framework too.

So, two small pieces of code, which has to be combined. I tried it, but my javascript knowlegde is poor. How it works, you can see now:

a. Html-Code in the head area of the html-document

b. Javascript-code in the head area of the html-document


c. Html-code in the body area of the html-dokumentes



d. The new function has this parameters:

  • mode :set = Store the value in a cookie, noset = use it only temporarly
  • setstyle : name of the stylesheets, without file extension.
    The path of the css directory has to be coded in the script part. The ending of the *.css file is added by the script.

e. Example:

This is the link to the test-page


f. Download

Datei styleswitcher_0.95.zip [22.8kb]
Beschreibung Styleswitcher 0.95
Letztes Update 2007-5-19, 8:00pm

g. Additional notes

From the mootools framework you will need following parts (Core, Element, Window.DomReady, Cookie, Assets) which can be downloaded here !

The functionalty and this page have been tested with Internet Explorer 7.0, Firefox 2.0 and Opera 9.20.

If you have any comments or things to optimze, feel free an write me a mail to:

I'm using the Syntaxhighlighter from Google.

© Achim Mensching 2014
Verwaltung | Site Map | Impressum | Kontakt