[JavaScript] 指定したタグ全てにスタイルを適用する

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

JavaScriptで指定したタグ全てにスタイルを適用するサンプルです。
例えば、全てのpタグの背景色を赤くするなどということができます。

サンプルソース

例）全てのpタグの背景色を赤色にする

function changeStyle(){
  var elements = document.getElementsByTagName('p');
  for(i=0;i<elements.length;i++){
    elements[i].style.backgroundColor = "#ff0000";
  }
}

function changeStyle(){

var elements = document.getElementsByTagName('p');

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

elements[i].style.backgroundColor = "#ff0000";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <p>ここはpタグ領域です</p>
  <div>ここはdivタグ領域です</div>
  <input type="button" value=" ボタン " onclick="changeStyle();">
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p>ここはpタグ領域です</p>

<div>ここはdivタグ領域です</div>

</body>

</html>

実行サンプル

ボタンを押すと、このページのpタグ使用箇所が全て赤くなります。

ここはpタグ領域です

ここはdivタグ領域です

※元に戻すには、[F5]キー等でページをリロードして下さい。

解説

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

執筆者：とら