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

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

ウェブページの背景色を動的に変更する方法 [装飾・内容変更]

JavaScriptを使ってページの背景色を動的に変更する方法はとても簡単で、document.body.style.backgroundColorに望みの色(値)を設定するだけです。ちなみに、昔々に使われていたdocument.bgColorやdocument.body.bgColorは既に非推奨になっていますので使わないようにしましょう。

ウェブページの背景色をJavaScriptで動的に変更する方法

JavaScriptを使うと、ページの背景色を簡単に変更できます。あんまり背景色を動的に変更したいと思うことは少ないかも知れませんが……。画像素材配布サイトなどでは、画像の使用感をつかむために、サンプルページの背景色を切り替えられるボタンを用意しているところがありますね。そんな感じで活用すると便利だろうと思います。
ページの背景色を変更するソースはとても簡単で、以下のように記述するだけです。

document.body.style.backgroundColor = "#ccffcc";

上記の場合は、ページの背景色を「淡い緑色(#ccffcc)」に変更します。
これは、body要素に適用されているスタイル(style)のうち、背景色(backgroundColor)に対して値を代入する処理です。
値にはCSSで指定可能な値なら何でも代入可能ですから、下記のようにRGBAカラーモデルで透明度も含めて指定することもできます。

document.body.style.backgroundColor = "rgba(128,128,255,0.5)";

上記の場合は、半透明の淡い青色を指定しています。
もっとも、ページの背景を半透明にする意味はなさそうですが。(ページの背景の下には透けて見える物が何もないわけですから。^^;)

※昔々は、もっと短く document.bgColor = "#ccffcc"; などという書き方もできましたが、これは今では非推奨になっていますので避けた方が良いでしょう。
なお、ページの背景色ではなく、任意の要素の背景色を変更する方法は、「任意の要素(ブロックなど)の背景色を動的に変更する方法」をどうぞ。

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

この書き方を利用して、ボックスの「背景色変更ボタン」を作ってみた例は、以下の通りです。ページ自体の背景色を変更するには、今ご覧になっているページでは試せないので、別ページにサンプルを置いておきます。

ウェブページの背景色をボタンで動的に変更するサンプル

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

ボタンクリックでページの背景色を動的に変更する機能を実現するJavaScriptソースは以下の通りです。
とりあえずデフォルトの装飾を以下のようにCSSで書いておきます。単にbody要素に対して背景色を加えているだけです。

CSSソース

body {
	background-color:#ccffcc; /* 背景色 */
}

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

JavaScriptソース

function changePageBgColor( newColor ) {
	document.body.style.backgroundColor = newColor;
}

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

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

HTML+JavaScriptソース

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

ものすごくシンプルな背景色の変更方法ですが。

()

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

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

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

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

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

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