Welcome to WebmasterWorld Guest from 54.163.25.166

Forum Moderators: open

Message Too Old, No Replies

Let the user change the CSS document

How do I do it?

     
6:15 pm on Mar 1, 2004 (gmt 0)

New User

10+ Year Member

joined:Jan 12, 2004
posts:30
votes: 0


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?

9:57 am on Mar 2, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:125
votes: 0


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

4:36 am on Mar 5, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 10, 2003
posts:188
votes: 0


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.