Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

任意の要素(ブロックなど)の背景色を変更する

スタイルシートを使えば、任意の要素に背景色を付加することができます。この背景色は、JavaScriptを使えば動的に変化させることができます。例えば、ある段落の背景色がスタイルシートで赤色に指定されているとき、JavaScriptを使って後から(マウスクリックなどに合わせて)青色に変化させることなどが可能です。

ページの背景色を変更するのは簡単でしたが、任意の要素の背景色を変更するのはちょっと面倒です。事前に、対象となる要素にidを振っておく必要があります。

まず、HTMLを以下のように記述します。

<div id="samplebox">
   このボックスの背景色を変更対象にする
</div>

上記では、div要素に対して、id属性の値に「samplebox」を指定しています。このid名を使うことで、スタイルを変化させる対象を特定します。

このdiv要素の背景色を変更するには、以下のようにJavaScriptを記述します。

document.getElementById('samplebox').style.backgroundColor = '#008000';

まず、「document.getElementById('samplebox')」で、idが「samplebox」な要素を特定します。このオブジェクトに対して、「style.backgroundColor」で背景色を指定できます。
上記のJavaScriptソースでは、「#008000」を代入しているので、このdiv要素の背景色は緑色になります。

ページの背景色を変更する場合は「bgColor」プロパティでしたが、任意の要素を変更する場合は「backgroundColor」プロパティです。プロパティ名が異なるので注意が必要です。

documentオブジェクトのgetElementByIdメソッドは、引数にid名を指定することで装飾対象を特定します。ですから、先にHTMLソース内で、装飾対象にid属性を振っておく必要があります。(※id名は唯一無二のものですから、同一ページ内に同じid名を持つ要素は1つだけでなければなりません。)

上記のJavaScriptソースを使って、div要素の背景色を変更するボタンを作った例は、以下の通り。

このボックス内部の背景色を動的に変更するボタン群:

上記のサンプルを実現するHTML&JavaScriptソースは以下の通り。

<div id="samplebox">
このボックス内部の背景色を動的に変更するボタン群:
<form>
<input type="button" value="赤色" onclick="document.getElementById('samplebox').style.backgroundColor = '#ff0000'; />
<input type="button" value="黄色" onclick="document.getElementById('samplebox').style.backgroundColor = '#ffff00'; />
<input type="button" value="青色" onclick="document.getElementById('samplebox').style.backgroundColor = '#0000ff'; />
<input type="button" value="緑色" onclick="document.getElementById('samplebox').style.backgroundColor = '#008000'; />
</form>
</div>

上記のソースでは、ボタンを作るinput要素内にonclick属性を使用して直接JavaScriptソースを記述しています。でも、実際に使う場合には、色名を引数で受け取るようにした「背景画像変更用関数」を作って、それをonclickイベントで呼び出すようにした方がスマートです。

それを説明していると長くなるのでここでは割愛しますが。(^_^;)
まあ、分からなければ、とりあえず上記のソースで書いている方法でも特に問題はありません。(スマートではないというだけで、機能的に差はありませんから。)

なお、どうしてもHTML側に手を加えられなくてid名を付加できない場合は、getElementByIdメソッドの代わりに、getElementsByTagNameメソッドを使って、対象要素名を指定することもできます。
その話は、またの機会に。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど