JavaScriptでページの背景色、前景色(文字色)を変更する

記述方法

javaScriptでページの背景色を変更する場合は"document"クラスの"bgColor"プロパティにカラーを設定します。ページの前景色を変更する場合は、"document"クラスの"fgColor"プロパティにカラーを設定します。

例1

コード

以下のコードを記述します。

PageColor.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script type="text/javascript">
        document.bgColor = "#202020";
        document.fgColor = "#E0E0E0";
    </script>
</head>
<body>
ページです。
</body>
</html>

解説

JavaScriptのコードの

 document.bgColor = "#202020";
 document.fgColor = "#E0E0E0";

の部分で、documentクラスのbgColor,fgColorプロパティにカラーを設定しています。

表示結果

上記のHTMLファイルを表示します。下図の結果となります。
JavaScriptでページの背景色、前景色(文字色)を変更する:画像1

ページの背景色と文字色が変更できています。

例2

コード

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function SetColor(foreColor, backColor) {
            document.bgColor = document.form1.Text1.value;;
            document.fgColor = document.form1.Text2.value;;
        }
    </script>
</head>
<body>
    <form name="form1" action=""> 
      前景色<input id="Text1" type="text" /><br />
      背景色<input id="Text2" type="text" /><br />
      <input id="Button2" type="button" value="button" onclick="SetColor()"/>
    </form>
</body>
</html>

解説

JavaScriptのコードの

  function SetColor(foreColor, backColor) {
    document.bgColor = document.form1.Text1.value;;
    document.fgColor = document.form1.Text2.value;;
  }

の部分でテキストボックスに入力された値を、documentオブジェクトのbgColor,fgColorプロパティに設定します。

SetColor関数は

  <input id="Button2" type="button" value="button" onclick="SetColor()"/>

の記述により、[button]がクリックされた際に呼び出されます。

表示結果

上記のHTMLファイルをブラウザで表示します。下図の画面が表示されます。
JavaScriptでページの背景色、前景色(文字色)を変更する:画像2

テキストボックスにカラーコードを入力します。入力ができたら[button]を押します。

テキストボックスに入力したカラー値にページの背景色と前景色が変更されました。
JavaScriptでページの背景色、前景色(文字色)を変更する:画像4