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

Solution 1:

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

document.getElementsByClassName

Solution 2:

I will refrain from advising in favour of this method, but it is possible to also directly add css rules (or more complex remove them) doing the following

var css = '.description-text { font-size: 100px; }',
    head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

There are rare occasions where this is a possible way to go and many situations where this is not the proper thing to do. You should never do this if you plan on overwriting the same thing multiple times (except if you remove the old rule first) and should only do this if you will use some other feature of CSS which builds upon this (e.g. new elements getting properly styles, 3rd party content getting properly styled, css animations, etc.).

Solution 3:

I had to do the same few months ago. I solved it with jQuery with .addClass() and .removeClass() and more http://api.jquery.com/category/css/

Or if you want only Javascript use the HTML DOM from pure Javascript. Official documentation about that with examples: http://www.w3schools.com/js/js_htmldom_css.asp

Solution 4:

Using JQuery you could use the css property :

$(".description-text").css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" });

All your elements that use the description-text class will be affected

Documentation of jquery css property

EDIT

Or with pure javascript

var elements = document.getElementsByClassName('description-text');

for(var i=0; i<elements.length; i++){
    elements[i].style.backgroundColor = "#ffe";
    elements[i].style.borderLeft = "5px solid #ccc";
    //any style you want to apply
}

Documentation of javascript style