[JavaScript] 指定したCSSクラス名の全ての背景色を変更する

投稿日：2016年10月2日更新日：2018年4月28日

指定したCSSクラス名が定義された要素全ての背景色を変更するサンプルです。
ソースを一部書き換えれば、背景色以外の変更にも対応できます。

クラス名を指定して背景色を動的に変更する

例）class="c1"の要素すべての背景色を緑にする

function changeBackColor(){
  var elements = document.getElementsByClassName('c1');
  for(i=0;i<elements.length;i++){
    elements[i].style.backgroundColor = "#00ff00";
  }
}

function changeBackColor(){

var elements = document.getElementsByClassName('c1');

for(i=0;i<elements.length;i++){

elements[i].style.backgroundColor = "#00ff00";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <div class="c1">C1</div>
  <div class="c2">C2</div>
  <div class="c1">C1</div>
  <input type="button" value=" ボタン " onclick="changeBackColor();">
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、class="c1"の枠の部分のみ背景色が替わります。

class="c1"です

class="c2"です

class="c1"です

※初期状態に戻したい時は、当ページを[F5]キー等でリロードしてください。

解説

document.getElementsByClassNameを使うと、指定したクラス名が付けられたオブジェクトが配列で取得できます。
取得した要素１つ１つに対して背景色を指定することで、表題の機能を実現させています。

執筆者：とら