Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

ページの背景色を変更する

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

ページの背景色を変更するソースはとても簡単で、以下のように記述するだけです。

document.bgColor = "#ccffcc";

上記の場合は、ページの背景色を「淡い緑色(=#ccffcc)」に変更します。
ページの背景色は、documentオブジェクトのbgColorプロパティに格納されています。この値に色名を代入することで、背景色を変更できます。
ずいぶん簡単ですね。

これを利用して、「背景色変更ボタン」を作ってみた例は、以下の通り。


背景色を… 変更

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

なお、上記の各ボタンを実現するHTML&JavaScriptソースは以下の通り。

<form>
<input type="button" value="現在の背景色を表示" onclick="alert( document.bgColor );" /><br />
背景色を…
<input type="button" value="緑色に" onclick="document.bgColor = '#008000';" />
<input type="button" value="青色に" onclick="document.bgColor = '#0000ff';" />
<input type="button" value="黄色に" onclick="document.bgColor = '#ffff00';" />
<input type="button" value="赤色に" onclick="document.bgColor = '#ff0000';" />
変更<br />
<input type="button" value="背景色を淡い黄色(#ffffcc)に戻す" onclick="document.bgColor = '#ffffcc';" />
</form>

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

なお、ページの背景色ではなく、任意の要素の背景色を変更する方法は、「任意の要素(ブロックなど)の背景色を変更する」をどうぞ。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど