[thelist] Javascript style switching help

Dan Smith D.B.Smith at soton.ac.uk
Tue Jan 4 07:43:54 CST 2005


Hi Tony, 

I'm a little confused as to why you would want to replicate the
functionality of the browser.  Why don't you just create a separate
style sheet for print and define it using the media attribute of the
<link> element?  

If you really want to change styles using JS, the easiest way I've found
is to have a different css file for each different look (say, 'red' and
'green' - although they shouldn't be named by colour) and use JS to
write out the <link> elements in the head of the document based upon the
value (or absence) of a style value in a cookie.  

I've found this method to work across most browsers and operating
systems. You can see an example of it at
http://www.soton.ac.uk/Accessibility/#change.  If this is the sort of
functionality you're looking for I can explain it in more detail.  

Cheers,
Dan

> I've written a script that should switch a style sheet, but 
> it only works in Safari. IE and Netscape aren't switching. 
> Can anyone help? Here's the relevant code:
> 
> function activatePrintCSS() {
>     var i, a;
>     for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
>         if(a.getAttribute("rel") == "print css" && 
> a.getAttribute("title") == "print") {
>             a.disabled = false;
>             
> document.getElementById("print-toggle").style.display = "none";
>             
> document.getElementById("print-toggle-return").style.display 
> = "inline";
>             showAllDescriptions();
>             showHideDescriptionToggle("hide");
>         }
>     }
> }
> 
> In IE and Netscape everything is being properly executed except this
> expression:
> 
>     a.disabled = false;
> 
> Here is the test site if you want to see the whole thing:
> 
http://www.tonygrimes.com/rets/

When you click on ³Print Friendly Version², it should switch stylesheets
to provide a preview for the user before they print the page.



More information about the thelist mailing list