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

Question

我有一堆 div，每个 div 都有不同的类组合(例如“a A”、“a b”、“b A”、“b”等)。

按一下按钮，我需要更改所有具有类 A 的元素的样式(不仅是“A”，而且必须包含它。例如“d A”和“A”会工作)

我试过了

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

但是没有用。控制台显示它无法为元素“未定义”设置样式，所以我猜它无法通过 getElementsByClassName(); 获得我需要的东西。

Answer 1

getElementsBySomething(复数)的 DOM 方法，与 getElementBySomething 返回 NodeList 的方法相反，不是一个元素。 NodeList 是类似于数组的对象。

如果采用这种方法，则必须遍历它并依次更改每个元素。大多数图书馆都有快捷的方法来为你做这件事。

例如对于 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";

激活替代样式。