Dynamically switching stylesheets

[Muzzz]

Is there a way to switch between style sheets on a page in response to a user-generated event?

[Rick Bull]

Something like this?


<link href="style.css" type="text/css" rel="stylesheet" id="stylesheet" />

<script type="text/javascript"><!--
function changeSS(ssURI) {
if (document.getElementById)
document.getElementById('stylesheet').href= ssURI;
}
//--></script>

[Rick Bull]

Yeah it does work, at least for more modern browsers (excl. Opera 6 not sure about v 7 Beta). I also have some code on my site which will change the stylesheet, and set a cookie to remember it when you change pages (if you don't have a server-side method to do it, which is the preferable way).

[Vladdy]

I played with it - you can preview the site templates for my newly established business here (still under construction): www.klproductions.com/TemplateT4.html
While I target only DOM compliant browsers with this functionality, the site will be viewable with any other browser (even if in text mode). Still, I found the more reliable way is to set the new stylesheet in a cookie and then reload the page. IE does not not really like setting the stylesheet file dynamically (in my experience). If you manage to make it work, I would like to see the code ;) .

Regards

[Vladdy]

document.write
I found the dynamic creation of style element to be unreliable in IE

[Paul O'B]

Theres a short tutorial here that might help:

http://www.alistapart.com/stories/alternate/