View Full Version : programatically changing many styles

04-07-2003, 11:16 PM
In CSS one can have a single style apply to many elements.
If one wants to programatically change the font of many elements in javascript, must one iteratively grind through each element, or is there a way to modify a single style and have that inherited by the many elements, much the same way as one would do inside of a CSS file???

In particular, I want to be able to change the font of some text elements within a DIV.

I know that I can put a <FONT> tag inside the DIV
<DIV> <FONT blah....> regular content </FONT></DIV>
But that would change EVERY element and I only want to change a specific (90%) set of elements.

04-07-2003, 11:26 PM
Indeed there is - http://codingforums.com/showthread.php?s=&threadid=14259

But I do have to say; I've used this, and although it's much more elegant code, it wasn't actually any faster than iterating with getElementsByTagName

btw - you're not really using <font> tags ... are you? ;)

04-07-2003, 11:41 PM
I haven't coded anything yet. Font was just the first thing to come to mind. What would you suggest for changing the font of text elements?

04-07-2003, 11:47 PM
Define CSS classes for them; then you can change the styles programatically.

04-07-2003, 11:56 PM
Ok, let me see if I understand this correctly...
The response you indicated would require that the elements be directly affected (inherit) the style, which is not how I originally phrased the problem. I was thinking that the elements would be contained by something which is affected by the style.
I'll attribute this to my not fully understanding how CSS might work (Highly likely)

something like
.mydivclass * TD
font : ...... ;

would affect the font of all the TD elements within this DIV, or
alternatively, I could put a class="myfontstuff" on all the elements
whose font I want affected.
font: .... ;

then I could use the javascript code you pointed to and modify the style attribute.

Does this sound about right?
Thanx for the very quick response...

04-08-2003, 12:05 AM
I just realized that the addressability of the style class
if (rules.item(i).type == CSSRule.STYLE_RULE && rules.item(i).selectorText == '.myP')

can I use

selectorText == ".class * element"

to search for
.class * element

and do I have to get the spacing exactly right

04-08-2003, 12:09 AM
Well that particular rule you pasted will match

.myP { }

Not sure where you're getting that * from

04-08-2003, 12:31 AM
I was trying to be fancy and applying the style to the childrent of a container without having to put the class attribute on all the child elements.

I got this from

'...The following selector:


matches a P element that is a grandchild or later descendant of a DIV element. Note the whitespace on either side of the "*". ...'

04-08-2003, 01:23 PM
Oh right; well I'm not sure if you can select rules with that kind of syntax; I can't see why not - but you'd have to try it and see.