HTML内の要素スタイルの変更/更新

Question

JavaScriptで一意のクラス名で要素を変更/更新するにはどうすればよいですか？

次のコードが機能していません。

document.getElementsByClassName("test").style.backgroundColor = "blue"; 

HTMLマークアップ：

<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 

Answer 1

参照：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

getElementsByClassName()は、指定する必要があるので、HTMLCollectionを返す整合素子のどのそれにスタイルが適用されます。

デモ：https://jsfiddle.net/jnu44ck0/

Answer 2

getElementsByClassNameは、配列のようなオブジェクトを返しますので、あなたは、個々の要素を摘み取る、または全部を反復処理する必要があります！

var elements = document.getElementsByClassName("test"); 
for(var i = 0; i < elements.length; i++) { 
    elements[i].style.backgroundColor = "blue"; 
}