にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

任意の要素(ブロックなど)の背景色を動的に変更する方法 [装飾・内容変更]

JavaScriptを使って任意の要素の背景色をJavaScriptで動的に変更したい場合は、document.getElementById(‘対象ID名’).style.backgroundColorなどの記述方法を使うと簡単です。ウェブページ内に存在するボックス(ブロックレベル要素)でもインライン要素でも、あらゆる要素の背景色を自由に変更可能です。なお、getElementByIdメソッドで装飾対象を特定する場合は、あらかじめHTML側の対象要素にid名を振っておく必要があります。

特定のボックスの背景色を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名を割り振ってあります。

HTMLソース

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

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

CSSソース

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

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

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関数を実行しています。その際、「変更したい背景色」を引数に指定しています。

HTML+JavaScriptソース

<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文を使ったループで色を変化させれば、ある色からある色へなめらかに変化させたりもできるでしょう。色を表す数値の作成がちょっと面倒ですが。
その話は、またの機会に。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---