Changing stylesheet with IE 5

A

Andrew Poulos

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
 
V

VK

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.
The following code works in FF, MZ, and IE6
var oStyleSheet = window.document.styleSheets[0]­.imports[0];
oStyleSheet.addRule("td","font­-size:1.2em;");

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.
 
A

Andrew Poulos

VK said:
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.

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/default.asp?url=/workshop/author/css/css_node_entry.aspThey even have an example of it working.
The following code works in FF, MZ, and IE6
var oStyleSheet = window.document.styleSheets[0]­.imports[0];
oStyleSheet.addRule("td","font­-size:1.2em;");

Absolutely impossible: with IE6 for the reason stated above, with FF &
MZ because of totally uncompatible syntacs.

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.
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.

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

Andrew Poulos
 
V

VK

This link states that rules will be dynamically applied to the current

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"."
They even have an example of it working.
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.
I don't follow, surely if I'm going to add a rule I need somewhere to
add it to?

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.
 
A

Andrew Poulos

This link states that rules will be dynamically applied to the current
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"."

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
 
V

VK

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

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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top