Change Style | JavaScriptSource

Change Style

Pascal Vyncke Sep 23, 2006

General

Let your visitors change the style sheet on your Web site. This script will let your visitors choose between five style sheets, which you can create yourself or use the ones included.


Choose your style!

Style 1
Style 2
Style 3
Style 4
Style 5

Notes

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: changeStyle.js


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Other

Download the images using the URL below:

Leave a Response

(8 comments)

Great code, with one exception. The cookie seems to apply only to pages within the directory where the user selected a style sheet. When they browse the site, and view pages within a different directory, the default style sheet is used. Anyone have a suggestions as to how to alter the code to overcome this limitation?

Matt Strippelhoff Apr 3, 2008

Sean, you would need something [a href="http://alistapart.com/articles/bodyswitchers"]a bit different[/a].

Lee Underwood Jan 29, 2008

I successfully used your code to create a user-defined css home page (with multiple external css files), but I wanted to know what I need to use in the headers of the pages to follow to keep this selection active?[br /](http://javascript.internet.com/css/change-style.html)[br /][br /]Thanks,[br /]S

Sean Ayotte Jan 9, 2008

I'm new at js, after following the directions carefully, the script only managed to put radio buttons and the list of style sheets in my Safari browser.[p]Any suggestions before I drag it into the trash?

Grego May 8, 2007

Great example. Thanks!

jeff Apr 24, 2007