Entry

How to dynamically change the linked stylesheet of a document?

Dec 8th, 2003 03:47
carsten dfgb, Al Sparber, Chris Durkin,

In IE 5+, the following will work and automatically switch the
document's style:
function setStyle (stylename) {
   var lnk = document.getElementsByTagName("LINK")[0];
   lnk.href = stylename;
}
This is the "DOM way" and should also work in NN6, but apparently it
does not. If anyone has a workaround for Netscape 6, please add it here!
-Chris Durkin
I've confirmed that this is in fact a bug in Netscape 6, see link below
for its long and sordid history:
http://bugzilla.mozilla.org/show_bug.cgi?id=75
-CD
Hi Chris...
Style sheets have a disabled property which can be either true or 
false. So you can link multiple style sheets in the head and toggle the 
disabled property programmatically. We have a example of that in the 
WebTech Design Pack Demo on our site (no purchase necessary!)...
http://www.projectseven.com/dreamweaver
Click the WebTech thumbnail and inspect its code. Look at the style 
sheet links, the first function, and the event handlers for the buttons 
that change the sheet.
We also have something similar coming out in our new book that uses 
cookies to remember style sheet "themes".
-Al Sparber
********************************************************************
hello everyone,
http://www.projectseven.com/dreamweaver is a dead link.
this might be usefull:
<link href="test1.css" rel="stylesheet" type="text/css" id="destyl">
<script language="JavaScript">
document.getElementById('destyl').disabled=true;
</script>
apparently there is a bug in netscape, so it wont work there.
if anyone knows a workaround, please let me know/answer here.
greetz,
Carsten
******************************************************************