user30622 user30622 - 6 months ago 31
CSS Question

Change CSS class content from javascript [Firefox/XUL]

I'm working on a firefox addon, and relies heavily on some dynamic changes with javascript. There are some UI elements (hbox/descriptions), which are styled using CSS classes. Now I wish to change the a CSS class defintion from javascript, without having to work element id's. Is it possible ?

Similar questions had been asked before, but most of them are using php to generate a CSS or jquery based changes.
Here's an example for my scenario:
My XUL :

<box id="firefox-addon-box">
<description id="description-1" class="description-text"> Some description </description>
<description id="description-2" class="description-text"> Some description </description>
</box>


My CSS :

.description-text {
font-size: 15px;
color: #fff;
}


So I wish to change the font-size in
description-text
class to say, 20px dynamically.
Now I know that we can change the style using individual id's, with a
getElementById()
and changing the style. But here I wish to change a class (which matters to a lot of elements), rather than to work on individual ids.
I also know that we can point to another class definition by
setAttribute()
and change 'class' - this would again require working on individual id's. In reality, I have plenty of UI elements (all pointing to one CSS class), and many values changed in a CSS class. So my question is, is there a way to directly change a CSS class definition from javascript, without having to work on element ids ?
Thanks for any help.

Answer
myVar = document.getElementsByClassName("description-text"); 

document.getElementsByClassName