Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

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)

10+ Year Member

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)

5+ Year Member

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)

10+ Year Member

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


Featured Threads

Hot Threads This Week

Hot Threads This Month