"Jeff Thies" <cy*******@sprintmail.com> wrote in message
news:3F***************@sprintmail.com...
I have a number of elements of "some-class".
I'd like to change the styles of some-class:
from
.some-class{color: red; display: block}
to
.some-class{color: red; display: none}
How do I do that?
It is probably tackling the problem form the wrong end, but if you
insist on modifying the class definition rather than switching the class
on the elements you will probably need to directly modify the
documents.styleSheets object (where supported).
Unfortunately there are two "types" of styleSheet object, the W3C DOM
version (Mozilla, of course) and the IE version. With a number of
browsers implementing both. Fortunately they are sufficiently similar in
structure to be relatively easily worked with.
The document.styleSheets object is a collection with indexed members (IE
also supports members named by ID attribute but sticking to the indexes
is more cross browser). So the first styleSheet is:-
if(document.styleSheets){
var sheet = document.styleSheets[0]
...
}
Each styleSheet contains a collection of style rules. On the W3C version
the collection is called "cssRules" and on IE it is called "rules", so:-
if(sheet){
var ssRules = sheet.cssRules || sheet.rules;
...
}
The rules are an indexed collection of style rules. I would not be
inclined to rely on the order (though they may follow the order in the
CSS on all implementations, but that would be an assumption). So that
would probably involve looping through the rules list looking for the
required item.
if(sheet){
var result = null;
for(var c = 0; c < ssRules.length;c++){
if(ssRules[c].selectorText == ".some-class"){
result = ssRules[c].style;
break;
}
}
...
}
Having identified the rule that has the desired - selectorText - value
that rule has a - style - object (virtually identical to normal
elements - style - objects) on which the desired property can be set:-
if(result){
result.display = "none"; //This object could be cached
//so that subsequent changes
//could avoid going through
//the whole retrieval process.
...
}
Of the major browsers Opera 7.11 currently does not implement a
document.styleSheets object and you won't get much joy out of Netscape 4
with this method (not that switching the display property works there
anyway) so it must be handled cautiously to avoid errors.
Another approach that might prove fruitful could be to declare two
separate STYLE elements and set the - disabled - attribute on one of
them. Later using a script to switch the initially disabled STYLE
element to enabled and disable the other. I haven't tried that myself
but I have seen it done in order to switch between multiple external
style sheets and it did work with Opera 7.
Richard.