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

Question

我有一堆div,每个div都有不同的类组合(例如"a A","a b","b A","b"等).

只需按一下按钮,我就需要改变所有具有A类的元素的样式(不仅是'A',而且必须包含它.例如"d A"和"A"都可以使用)

我试过了

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

但它不起作用.控制台说它无法为元素'undefined'设置样式,所以我猜它不能得到我需要的东西getElementsByClassName();.

Answer 1

DOM方法getElementsBySomething(复数),而不是getElementBySomething返回NodeList的DOM方法,而不是元素.NodeLists是类似于Array的对象.

如果你采取这种方法,你必须循环它并依次改变每个元素.大多数库都有快捷方法为您完成.

例如对于YUI 3:

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

或jQuery

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

另一种方法是使用JavaScript修改样式表本身.

第三种选择是使用后代选择器提前设置更改的样式,例如:

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

然后

document.body.className += " bar";

激活替代样式.