Dynamically changing a stylesheet

[wjbell]

I have a piece of javascript I need to modify. Right now it changes a
stylesheet in the document between style.css and no_indent.css. These
are in the head of my document:

<link rel=stylesheet href=/style.css>
<link rel=stylesheet href=/no_indent.css>
<link rel=stylesheet href=/style.css>
What the code below does is toggle between the two depending on what
link is clicked. Here are the links:

<a href=JavaScript :changeSheets(1 )>Threaded</a>
<a href=JavaScript :changeSheets(2 )>Flat</a>

What I want to do is have one link that will toggle between the two
stylesheets. So the page loads style.css initially. If the link is
clicked once it changes to no_indent.css. If it's clicked again it
changes back to style.css, and so on.

Can anyone let me know how to do this?

TIA

code:
----------------------------------

function changeSheets(wh ichSheet){
whichSheet=whic hSheet-1;
if(document.sty leSheets){
var c=document.styl eSheets.length;
for(var i=0;i<c;i++){
if(i!=whichShee t){
document.styleS heets[i].disabled=true;
}else{
document.styleS heets[i].disabled=false ;
}
}
}
}

[Alice]

> What I want to do is have one link that will toggle between the two

stylesheets. So the page loads style.css initially. If the link is
clicked once it changes to no_indent.css. If it's clicked again it
changes back to style.css, and so on.

How about leaving the links as they are but give each an id and, using the
style sheets, position them in the same space.
Then toggle their visibility in the function you call.

[Thomas 'PointedEars' Lahn]

wjbell wrote:

I have a piece of javascript I need to modify. Right now it changes a
stylesheet in the document between style.css and no_indent.css. These
are in the head of my document:

<link rel=stylesheet href=/style.css>
<link rel=stylesheet href=/no_indent.css>
<link rel=stylesheet href=/style.css>
This is invalid HTML. Attribute values containing `/' must be
delimited using doule or single quotation marks. Since this
is not the only exception, you should always delimit attribute
values that way.
What the code below does is toggle between the two depending on what
link is clicked. Here are the links:

<a href=JavaScript :changeSheets(1 )>Threaded</a>
<a href=JavaScript :changeSheets(2 )>Flat</a>
Not only this is invalid HTML again because of omitted quotation
marks, it is also a Bad Thing. What about users without client-side
JavaScript support? You should write the hyperlinks dynamically (so
only if JavaScript is supported) and use the `onclick' event handler
where supported:

<script type="text/javascript">
<!-- Use the SGML comment in HTML only

var a = ["Threaded", "Flat"];
var s = "";

for (var i = 0; i < a.length; i++)
{
s +=
'<a href="Javascrip t:changeSheets( ' + (i + 1) + ')"'
' onclick="change Sheets(' + (i + 1) + '); return false;">'
+ a[i]
+ '<\/a>\n';
}

document.write( s);

// Use the SGML comment in HTML only -->
</script>
What I want to do is have one link that will toggle between the two
stylesheets. So the page loads style.css initially. If the link is
clicked once it changes to no_indent.css. If it's clicked again it
changes back to style.css, and so on. Can anyone let me know how to
do this?

Quickhack:

<script type="text/javascript">
<!-- Use the SGML comment in HTML only

var currentSheet = 0;
var s =
'<a href="Javascrip t:changeSheet(! currentSheet)"'
+ ' onclick="change Sheet(!currentS heet);'
+ ' return false;">'
+ 'Toggle stylesheet<\/a>\n';

document.write( s);

// Use the SGML comment in HTML only -->
</script>

The changeSheet(... ) function must set the new stylesheet for the link
accordingly:

function changeSheet(whi chSheet)
{
// ...

// convert argument to a number and assign value to global variable
currentSheet = +whichSheet;

// REMOVE THIS, we have zero-based indexes everywhere now
whichSheet=whic hSheet-1;

...
// use currentSheet instead
...
}

By passing a reference to a container object (say, the
HTMLAnchorEleme nt object itself) which properties are
modified instead of a primitive value, you can avoid the
`currentSheet' global variable.
HTH

PointedEars