Let the user change the CSS document

How do I do it?

[Trenton]

Hi

I've been hunting around on the web for ages looking for this - please help! I want to do two things:

1. Have a link to a text-only version (i.e. switch CSS) on the main graphical version, and a link to the graphical version when users are in the text-only version (switch CSS back).

2. Have the web pages automatically load up the text-only version CSS for IE 4 and Netscape 4 and lower, and not provide the option to change. (The CSS I'm using doesn't doesn't make the page look very good in these browsers)

Any JavaScript geniuses out there who know the answer?

[HocusPocus]

I'll attempt the first one.

Off the top of my head not tested, something like

function toggleCS()
{
cs=true;
if(document.styleSheets.length>0)
{
cs=!document.styleSheets[0].disabled;
for(i=0;i<document.styleSheets.length;i++)
{document.styleSheets[i].disabled=cs;}
}
}
</SCRIPT>

<A href="javascript:toggleCS()">CSS Toggle</a>

Switches off/on linked style sheets

-M

[ricfink]

I your link tag looks like this:

<link rel="stylesheet" id="styletag" type="text/css" media="screen" href="graphical.css">

You can just change the value of the href attribute and the browser will load the other stylesheet and the appearance of the page will change accordingly.

javascript function to do this would be:

function modifyStyle(newfile) {
var x = document.getElementById('styletag');
x.setAttribute('href',newfile);

You would call it from, presumably, a button like this:

<input type="button" value="Text Only" onclick="modifyStyle('textonly.css');">

to revert back to graphical stylesheet, make another button with:
onclick="modifyStyle('graphical.css');

Hope this helps.