ウェブページの背景色を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要素に対して背景色を加えているだけです。

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

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

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

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

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

<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>

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

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