changing class properties

[Jeff Thies]

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?

Cheers,
Jeff

 

[Stuart Palmer]

what are you trying to do this for? links?different browsers? there may be a
better way to do it than using JS to dynamicaly change it

Stu

 

[Jeff Thies]

Hi Stuart.

what are you trying to do this for? links?different browsers?

IE5+ maybe NS6

there may be a
better way to do it than using JS to dynamicaly change it

I have form fields that I want to turn on/off (display: none) depending
on the value of a rolldown.

I could give ID's to all them and iterate through a list of them, seems
awkward.

I can change between the href of a stylesheet, so it can choose an
external sheet that has the right class properties:

document.styleSheets['a-stylesheet'].href='stylesheet_with_different_class_properties';

But it seems to me that I should be able to rewrite the rule in the
stylesheet, I don't remember how... That would seem to be the most
maintainable.

Cheers,
Jeff

 

[Richard Cornford]

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.

 

[Jeff Thies]

there may be a

I have form fields that I want to turn on/off (display: none) depending
on the value of a rolldown.

This is a bit awkward but it works in IE5:
I can't get it to use named stylesheets. Isn't there a better way to
quit a loop than return 0?

<html>
<head>
<script type="text/javascript">
function setClassStyle(s_s,classname,class_style,style_value){
var style_sheet=document.styleSheets[s_s];
for (var j=style_sheet.rules.length-1;j>=0;j--){
var sS=style_sheet.rules[j];
var class_name=sS.selectorText.replace(/\./g,'');
if(class_name==classname){
sS.style[class_style]=style_value;
return 0;
}
}}
</script>
<style type="text/css" name="s">
..a{color: blue}
..b{color: orange}
</style>
</head>
<body>
<a href="javascript:void(0)"
onclick="setClassStyle(0,'a','color','red')">make red</a><br />
<a href="javascript:void(0)"
onclick="setClassStyle(0,'a','color','orange')">make orange</a>
<p class="a">some class a text is here</p>

</body>
</html>

Cheers,
Jeff

I could give ID's to all them and iterate through a list of them, seems
awkward.

I can change between the href of a stylesheet, so it can choose an
external sheet that has the right class properties:

document.styleSheets['a-stylesheet'].href='stylesheet_with_different_class_properties';

But it seems to me that I should be able to rewrite the rule in the
stylesheet, I don't remember how... That would seem to be the most
maintainable.

Cheers,
Jeff

Stu

 

[Jeff Thies]

Thanks Richard,

You answered every question I had and a few that hadn't occured to me.

Here's what I'll probably use:

function setClassStyle(sheet_index,classname,class_style,style_value){
var style_sheet=document.styleSheets[sheet_index];
if(!style_sheet){return;}
var sRules = style_sheet.cssRules || style_sheet.rules;
for (var j=sRules.length-1;j>=0;j--){ // later rules will overide //
earlier
var sS=sRules[j];
var class_name=sS.selectorText.replace(/\./g,'');
if(class_name==classname){
sS.style[class_style]=style_value;
break;
}
}}


I'm not going to worry about Opera 7 for this as there will be only a
handfull of IE users. My guess is that my client is going to want to
change how he want these forms to change and I thought classname changes
would have been the easiest to switch.

Thanks!
Jeff

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.

 

[Richard Cornford]

for (var j=sRules.length-1;j>=0;j--){

<snip>

An alternative - for - loop that counts down through an array-like
collection:-

for(var j = sRules.length ; j-- ; ){
...
}

Richard.