Change CSS of class in Javascript?

you can create new style rule instead.

var cssStyle = document.createElement('style');
cssStyle.type = 'text/css';
var rules = document.createTextNode(rule);
cssStyle.appendChild(".YOU_CLASS_NAME{display:hidden}");
document.getElementsByTagName("head")[0].appendChild(cssStyle);

$("#YOUR_DOM_ID").addClass("YOUR_CLASS_NAME");

You can use getElementsByClassName in which you'll get an array of elements. However this is not implemented in older browsers. In those cases getElementsByClassName is undefined so the code has to iterate through elements and check which ones have the desired class name.

For this you should use a javascript framework such as jQuery, mootools, prototype, etc.

In jQuery it could be done with a one-liner as this:

$('.theClassName').css('display', 'inline')

Do you mean something like this?

var elements = document.getElementsByClassName('hidden-class');
for (var i in elements) {
  if (elements.hasOwnProperty(i)) {
    elements[i].className = 'show-class';
  }
}

Then the CSS

.hidden-class { display: none; }
.show-class { display: inline; }

Best way to do it is to have a hidden class, like so:

.hidden { display: none; }

After that, there is a className attribute to every element in JavaScript. You can just manipulate that string to remove occurrences of the hidden class and add another one.

One piece of advice: Use jQuery. Makes it easier to deal with that kind of stuff, you can do it like:

$('#element_id').removeClass('hidden').addClass('something');