特定のボックスの背景色をJavaScriptで動的に変更する方法

スタイルシート(CSS)を使えば任意の要素に背景色を付加できます。この背景色は、JavaScriptを使えば動的に変化させられます。例えば、ある段落の背景色がスタイルシートで赤色に指定されているとき、JavaScriptを使って後から(マウス操作などに合わせて)青色に変化させることなどができます。
ウェブページの背景色を動的に変更する方法は簡単でしたが、ウェブページ内に存在する任意の要素(ブロックでもインラインでも)の背景色を変更するのはちょっとだけ手間が必要で、事前に対象要素にid名を割り振っておく必要があります。
id名さえ割り振ってあれば、以下のような記述だけで背景色を変更できます。

document.getElementById('対象id名').style.backgroundColor = '新しい背景色';

getElementByIdを使って対象要素を特定し、styleプロパティのbackgroundColorプロパティの値に、望みの背景色を代入するだけです。
例えば、id="samplebox"が指定された要素の背景色を、空色(skyblue)に変更するなら、以下のようにJavaScriptを記述します。

document.getElementById('samplebox').style.backgroundColor = 'skyblue';

とても簡単です。

ボックスの背景色をボタンで動的に変更するサンプル

この書き方を利用して、ボックスの「背景色変更ボタン」を作ってみた例は、以下の通りです。

サンプルボックス

「現在の背景色を表示する」ボタンをクリックすると、現在の背景色(の名称)がアラートボックスに表示されます。
その下の各色名ボタンをクリックすると、このページの背景色が指定の色に変化します。実際に試してみて下さい。

ボックスの背景色をボタンで動的に変更するサンプルのソース

上記の各ボタンとその機能を実現するHTML＆JavaScriptソースは以下の通りです。

まず、背景色を変化させたいボックスをHTMLで作成しておきます。JavaScriptで対象を特定できるように、id属性を使って「sakurabox」というid名を割り振ってあります。

<p id="sakurabox">
	サンプルボックス
</p>

上記の枠に対して、デフォルトの装飾を以下のようにCSSで書いておきます。枠線を付けて背景色を指定しているだけの簡単なスタイルシートです。

#sakurabox {
	border:1px dashed gray;   /* 枠線 */
	border-radius:1em;        /* 角丸 */
	background-color:#ccffcc; /* 背景色 */
}

さて次に、上記で作ったボックスの背景色を、ボタンクリックで動的に変更するための関数をJavaScriptで作成します。

function changeBoxColor( newColor ) {
	document.getElementById('sakurabox').style.backgroundColor = newColor;
}

上記で作成しているchangeBoxColor関数は、id名がsakuraboxであるボックスの背景色(backgroundColor)を、引数に与えられた文字列に変更する関数です。
引数に与えられた内容が、色名として使用可能な文字列ではなかった場合のエラー処理などは一切していませんが……。(^_^;) まあ、自分で使うだけの関数なのですから、特に問題はないでしょう。

documentオブジェクトのgetElementByIdメソッドは、引数にid名を指定することで装飾対象を特定します。ですから、先にHTMLソース内で、装飾対象にid属性を振っておく必要があります。(※id名は唯一無二のものですから、同一ページ内に同じid名を持つ要素は1つだけでなければなりません。)
どうしてもHTML側に手を加えられなくてid名を付加できない場合は、getElementByIdメソッドの代わりに、getElementsByTagNameメソッドを使って対象要素名を指定したりする方法もあります。jQueryが使えるならjQueryで対象を特定する方が楽だと思いますが。

最後に、この関数を呼び出すボタンを作成します。これらのボタンには、onclick属性を付加して、上記で作成したchangeBoxColor関数を実行しています。その際、「変更したい背景色」を引数に指定しています。

<p>
	背景色を…
	<input type="button" value="緑色に変更する" onclick="changeBoxColor('#008000');">
	<input type="button" value="青色に変更する" onclick="changeBoxColor('#0000ff');">
	<input type="button" value="黄色に変更する" onclick="changeBoxColor('#ffff00');">
	<input type="button" value="赤色に変更する" onclick="changeBoxColor('#ff0000');">
	<input type="button" value="淡い緑色に戻す" onclick="changeBoxColor('#ccffcc');">
</p>

ものすごくシンプルな背景色の変更方法ですが。
上記のサンプルでは、ただ1回だけ色を変更します。for文を使ったループで色を変化させれば、ある色からある色へなめらかに変化させたりもできるでしょう。色を表す数値の作成がちょっと面倒ですが。
その話は、またの機会に。

(更新日：2017年05月27日)