Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Using Javascript to change a CSS rule declaration

To change an actual rule (not a specific instance)

2:08 pm on May 10, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
votes: 0

OK, what I'd like to do is have is a set of form controls (radiobuttons) that are all given a style/class, so that they all behave in the same way at the same time (in this case, visible or not).

I have a style rule such as

.humo {visibility: visible}

and then, when a specific event takes place, the following Javascript is executed:

var mysheet=document.styleSheets[0]
var humorule=mysheet.cssRules? mysheet.cssRules[0]: mysheet.rules[0]
//Access the first rule of the first stylesheet
//one of the above works in IE, the other in Mozilla family
if(inp<1) humorule.style.visibility="hidden"
else humorule.style.visibility="visible"

<input type="checkbox" onClick="recalculate();" accesskey="i">Always shown

<input type="checkbox" onClick="pickups(pickup.value)" class="humo">Sometimes shown

So there are a lot of checkboxes, some of which need to be disabled or invisible when certain conditions are met.

I suppose my question is: of the two properties
Is there any consensus as to which is best? Or, in other words, which of these (if any) are official W3C, and which are supported in Safari and/or Opera 9? (I currently don't have access to either, and the web comparisons are hazy on this). I'd prefer not to get into a massive branching fest, so I'm going to limit myself to two alternatives

Or, is there any better way of doing this without looping through all the checkboxes individually?

8:12 pm on May 10, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 9, 2006
votes: 0

Maybe I don't understand completly, but why not just change className

.v {
visibility: visible;

.h {
visibility: hidden;

if(inp<1) document.form1.radiobuttonname[0].className = "v";

- JS

2:46 pm on May 12, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
votes: 0

Well, there are several buttons that I want to be effected by the change. I was using a constant (meaningful) class so that I could change the definition and affect them all.

I guess that would be the neatest way. I'm not sure how you would do it if you wanted to change several classnames at once without a loop...