使用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

getElementsBySomething（复数）的DOM方法，而不是getElementBySomething返回NodeList的DOM方法，而不是元素。 NodeLists是类似于Array的对象。

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

e.g。对于YUI 3：

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

或jQuery

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

另一种方法是修改the stylesheet itself with JavaScript。

第三种选择是使用后代选择器预先设置更改的样式，例如：

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

然后

document.body.className += " bar";

激活替代样式。

Answer 2

你应该尝试使用像jQuery这样的库来允许你使用CSS选择器。然后你就可以了

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

您甚至可以使用多个元素一次更改多个样式

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