homepage Welcome to WebmasterWorld Guest from 54.211.138.180
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Using Javascript to change a CSS rule declaration
To change an actual rule (not a specific instance)
R1chard




msg:599493
 2:08 pm on May 10, 2006 (gmt 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"

The HTML:
<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
mysheet.cssRules[0]
mysheet.rules[0]
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?

 

jshanman




msg:599494
 8:12 pm on May 10, 2006 (gmt 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

R1chard




msg:599495
 2:46 pm on May 12, 2006 (gmt 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...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved