使用JavaScript一次更改具有相同类名的多个元素的样式？

Question

I have a bunch of divs with different combinations of classes in each (eg "a A", "ab", "b A", "b" etc.).

With a press of a button, I need to change the styles of, for example, all elements which have the class A (not only 'A', but must include it. Eg both "d A" and "A" would work)

I have tried

document.getElementsByClassName('a A').style.background = "#f00";

but it didn't work. The console says that it can't set a style for element 'undefined', so I guess it doesn't get what I need with getElementsByClassName(); .

Answer 1

The DOM methods that getElementsBySomething (plural), as opposed to ones which getElementBySomething return a NodeList , not an element. NodeLists are Array-like objects.

You have to loop over it and change each element in turn if you take that approach. Most libraries have shortcut methods to do that for you.

eg for YUI 3:

Y.all('.foo').setStyle('background', '#f00');

or jQuery

jQuery('.foo').css('background', '#f00');

An alternative approach would be to modify the stylesheet itself with JavaScript .

A third option would be to set up your changed styles in advance, using a descendent selector such as:

.foo { /* something */ }
body.bar .foo { /* something else */ }

And then

document.body.className += " bar";

to activate the alternative styling.

Answer 2

You should try using a library like jQuery that allows you to use CSS selectors. Then you would be able to do

$('.a,.A').css("background", "#f00");

You could even change multiple styles at once with multiple elements

$('.a,.A').css({"background": "#f00", "color": "#000"});