《 5:00 PM 公開/更新》
JavaScriptを使って任意の要素の背景色をJavaScriptで動的に変更したい場合は、document.getElementById(‘対象ID名’).style.backgroundColorなどの記述方法を使うと簡単です。ウェブページ内に存在するボックス(ブロックレベル要素)でもインライン要素でも、あらゆる要素の背景色を自由に変更可能です。なお、getElementByIdメソッドで装飾対象を特定する場合は、あらかじめHTML側の対象要素にid名を振っておく必要があります。
スタイルシート(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ソース
1 2 3 | <p id= "sakurabox" > サンプルボックス </p> |
上記の枠に対して、デフォルトの装飾を以下のようにCSSで書いておきます。枠線を付けて背景色を指定しているだけの簡単なスタイルシートです。
CSSソース
1 2 3 4 5 | #sakurabox { border : 1px dashed gray ; /* 枠線 */ border-radius: 1em ; /* 角丸 */ background-color : #ccffcc ; /* 背景色 */ } |
さて次に、上記で作ったボックスの背景色を、ボタンクリックで動的に変更するための関数をJavaScriptで作成します。
JavaScriptソース
1 2 3 | 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ソース
1 2 3 4 5 6 7 8 | <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文を使ったループで色を変化させれば、ある色からある色へなめらかに変化させたりもできるでしょう。色を表す数値の作成がちょっと面倒ですが。
その話は、またの機会に。
()※初版は2007年5月12日に公開されました。
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)