使用JavaScript一次性更改多個元素的樣式，並使用相同的類名稱？

Question

我有一堆div與不同類的組合在每個（例如「一個A」，「一個B」，「B A」，「B」等）。

通過按下按鈕，我需要改變類型的所有元素，例如所有具有類A的元素（不僅是'A'，但必須包含它，例如「d A」和「A 「將工作）

我試圖

document.getElementsByClassName（ '一個A'）style.background = 」＃F00「;

但它沒有工作。控制檯說它不能爲元素'undefined'設置樣式，所以我想它不會得到我需要的getElementsByClassName();。

Answer 1

DOM方法getElementsBySomething（複數），而不是getElementBySomething返回NodeList，而不是一個元素。 NodeLists是類似數組的對象。

如果你採取這種方法，你必須循環它並依次改變每個元素。大多數圖書館都有捷徑來爲你做。

例如爲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"});