External stylesheet setting in Firefox

[Barry]

Hello. I am in the process of modifying some JavaScript code which
refers to an external stylesheet, but unfortunately I have very little
previous JavaScript experience. Currently the code has only been
written to be used in IE but I am looking into getting it to work for
Firefox. I have addeda small piece of code to detect Firefox and then
wish to reset the stylesheet from the IE version to a Firefox version.
Unfortunately the same line of code which works in IE does not work in
Firefox:

document.styleSheets[0].href = "styles/FIREFOX/" + stylesheet;

which gives the following error in the debugger:

Error: setting a property that has only a getter

This is quite a vague error and I cannot figure out an alternative. As
I understand it, the href property is read-only in Firefox so is there
some other method I can use instead?

Thanks in advance.

 

[josh]

Barry ha scritto:

document.styleSheets[0].href = "styles/FIREFOX/" + stylesheet;
Error: setting a property that has only a getter

in W3c/Firefox that is only a read-only property but
you can dinamically change the href as follow:

i.e.

your style:
<link id ="my_style" rel="stylesheet" type="text/css"
href="../css/ui_controls.css"/>

your function:
function changeStyle(css)
{
var l = document.getElementById("my_style");
l.href = css;
}

than with an event pass your css url file to that function:
<input type="button" value="change style"
onclick="changeStyle('other.css')"/>

Bye

 

[Barry]

Worked a treat - many thanks.

 

[vynogradov]

If you have multiple stylesheets like this:

<link rel="stylesheet" href="one.css">
<link rel="stylesheet" href="two.css">
<link rel="stylesheet" href="three.css">

you can activate them in javascript with

document.styleSheets.disabled = true;

 

[vynogradov]

I mean:
.....disabled = false;