Changing stylesheet with IE 5

I'm trying to change a style in a stylesheet. The following code works
in FF, MZ, and IE6 but IE 5 gives the error of "invalid procedure call
or argument":

var oStyleSheet = window.document.styleSheets[0].imports[0];
oStyleSheet.addRule("td","font-size:1.2em;");

Is there a way to do this with IE 5?

Andrew Poulos

re: Changing stylesheet with IE 5

Check that oStyleSheet.readOnly == true for IE (linked and imported
rules can be viewed but not edited). Respectively any changes you apply
on linked/imported rules are not reflected on the page and lost on
reload.
[color=blue]
> The following code works in FF, MZ, and IE6
> var oStyleSheet = window.document.styleSheets[0]*.imports[0];
> oStyleSheet.addRule("td","font*-size:1.2em;");[/color]

Absolutely impossible: with IE6 for the reason stated above, with FF &
MZ because of totally uncompatible syntacs.
Was it a try to shake up our brain filters? ("It was already reached so
now think how" ;-).

Also you may have a wrong idea about styles' allocation at runtime. All
styles, from wherever they came from, are members of the
document.styleSheets[0]. Inline, linked or imported rules just having
different extra properties to sort them out if you need to. So very
rarely you really need a "fully qualified path" to a rule.

re: Changing stylesheet with IE 5

VK wrote:[color=blue]
> Check that oStyleSheet.readOnly == true for IE (linked and imported
> rules can be viewed but not edited). Respectively any changes you apply
> on linked/imported rules are not reflected on the page and lost on
> reload.[/color]

This link states that rules will be dynamically applied to the current
page, and seems to be the case in my testing with IE6:
<url:
http://msdn.microsoft.com/library/de...node_entry.asp[color=blue]
>[/color]
They even have an example of it working.
[color=blue][color=green]
>>The following code works in FF, MZ, and IE6
>>var oStyleSheet = window.document.styleSheets[0]*.imports[0];
>>oStyleSheet.addRule("td","font*-size:1.2em;");[/color]
>
> Absolutely impossible: with IE6 for the reason stated above, with FF &
> MZ because of totally uncompatible syntacs.[/color]

But it does work in IE 6.

Anyhow, I've added some error checking (feature detection, whether
there's currently any stylesheet, import stylesheet, etc) and it seems
to be a way forward for me.
[color=blue]
> Also you may have a wrong idea about styles' allocation at runtime. All
> styles, from wherever they came from, are members of the
> document.styleSheets[0]. Inline, linked or imported rules just having
> different extra properties to sort them out if you need to. So very
> rarely you really need a "fully qualified path" to a rule.[/color]

I don't follow, surely if I'm going to add a rule I need somewhere to
add it to?

Andrew Poulos

re: Changing stylesheet with IE 5

> This link states that rules will be dynamically applied to the current[color=blue]
> page, and seems to be the case in my testing with IE6:
> <url:
> http://msdn.microsoft.com/library/de...node_entry.asp[/color]

This link states that "The rule object has a readOnly property that
indicates whether the particular rule is from an editable source.
Imported and linked styles cannot be edited, so the readOnly property
for the contained rule would return "true"."
[color=blue]
> They even have an example of it working.[/color]
The question is what do you mean by "working". You can dynamically
add/edit/remove inline styles (<style>...</style> section) and see the
changes at runtime. Linked and imported style sheets can be only
dynamically enabled/disabled or replaced (by changing href property).

In IE 6 they just implemented a "black hole" for it. You can
add/edit/remove readOnly styles, but it has no effect on the page
neither on the source .css files.
[color=blue]
> I don't follow, surely if I'm going to add a rule I need somewhere to
> add it to?[/color]

Depends on what are trying to do. If you are making an HTML editor, you
should add your rules to the "zero styleSheet" (styleSheet[0]) so user
could see style changes dynamically. Later saving generated rules on
file is a separate topic.

re: Changing stylesheet with IE 5

>>This link states that rules will be dynamically applied to the current[color=blue][color=green]
>>page, and seems to be the case in my testing with IE6:
>><url:
>>http://msdn.microsoft.com/library/de...node_entry.asp[/color]
>
> This link states that "The rule object has a readOnly property that
> indicates whether the particular rule is from an editable source.
> Imported and linked styles cannot be edited, so the readOnly property
> for the contained rule would return "true"."[/color]

Yes, I saw that. I took it to mean that I couldn't edit an existing rule
not that I couldn't add rules. That is, whereas I don't think I can do this:
document.styleSheets[0].imports[0].rules[0].style.color = "blue";

I 'know' I can do this:
document.styleSheets[0].imports[0].addRule("html td","font-size: 1.2em;");

I'm not just trying to be contradictory but I built a test piece,
imported a stylesheet, added a rule to it and the change was reflected
immediately on the page.


Andrew Poulos

re: Changing stylesheet with IE 5

> I 'know' I can do this:[color=blue]
> document.styleSheets[0].import*s[0].addRule("html td","font-size: 1.2em;");[/color]

After this answer I open again my testcase and it did work w/o changing
a char in the script. I'm a strong believer of nightly ghosts inside
computers (specially mine) :-)

So I decided to write back but I browsed a bit by my bookmarks first.
After that I open the testcase one last time - and it did not work
again!

I guess my IE doesn't behave (but it does on everything else though) or
it's a twilight zone IE makers did not define for 100%.

Any other ideas?