[JavaScript] JavaScriptでCSS(スタイルシート) のスタイルを動的に変更する

このページのタグ:[HTML] [JavaScript] [CSS スタイル変更]
JavaScriptからページのCSSのスタイルを動的に変更するコードを紹介します。

概要

JavaScriptでスタイルを変更するには、要素のstyleプロパティを変更します。

例1

コード (JavaScriptChangeCssTextBox.html)


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
      function SetColor(foreColor, backColor) {
        target = document.getElementById("page");
        if (target != null) {
          target.style.backgroundColor = document.form1.Text1.value;;
          target.style.color = document.form1.Text2.value;
        }
      }
    </script>

    <title></title>
</head>
<body id="page">
  <form name="form1">
    <div>背景色<input id="Text1" type="text" /></div>
    <div>前景色<input id="Text2" type="text" /></div>
    <input id="Button1" type="button" value="button" onclick="SetColor()"/>
  </form>
</body>
</html>

解説

フォームに配置したボタンをクリックするとJavaScriptで記述されたSetColor()関数を実行します。


function SetColor(foreColor, backColor) {
  target = document.getElementById("page");
  if (target != null) {
    target.style.backgroundColor = document.form1.Text1.value;;
    target.style.color = document.form1.Text2.value;
  }
}
SetColor関数ではdocument.getElementByIdメソッドを呼び出しBodyタグに設定されたIDからBodyタグのElementを取得します。Elementが取得できた場合(target != null)はElementのstyleプロパティのbackgroundColor, Colorプロパティをテキストボックスの値に設定します。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。


テキストボックスにカラーコードを入力し、[button]をタップします。


下図の画面に切り替わります。テキストボックスに入力されたカラーコードに背景色と前景色が変更されました。


他のカラーコードを入力して[button]をクリックしてみます。入力したカラーコードに変更されます。


例2

コード (JavaScriptChangeCssParameter.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">
      window.onload = function onLoad() {
        param = GetQueryString();
        target = document.getElementById("page");
        if (param != null) {
          if (param["bgcolor"] != null) {
            target.style.backgroundColor = "#" + param["bgcolor"];
          }
          if (param["fgcolor"] != null) {
            target.style.color="#"+ param["fgcolor"];
          }
        }
      }

      function GetQueryString() {
        if (1 < document.location.search.length) {
          // 最初の1文字 (?記号) を除いた文字列を取得する
          var query = document.location.search.substring(1);

          // クエリの区切り記号 (&) で文字列を配列に分割する
          var parameters = query.split('&');

          var result = new Object();
          for (var i = 0; i < parameters.length; i++) {
            // パラメータ名とパラメータ値に分割する
            var element = parameters[i].split('=');

            var paramName = decodeURIComponent(element[0]);
            var paramValue = decodeURIComponent(element[1]);

            // パラメータ名をキーとして連想配列に追加する
            result[paramName] = decodeURIComponent(paramValue);
          }
          return result;
        }
        return null;
      }
    </script>

</head>
<body id="page">
  <div>テストページです。</div>
  <div>あいうえお</div>
  <div>かきくけこ</div>
</body>
</html>

解説

先のHTMLファイルと同様ですが、HTMLファイルのパラメーターからカラーコード取得して前景色と背景色を変更します。パラメーターの取得についてはこちらの記事を参照してください。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。


URLを変更します。URLの後ろに"?bgcolor=C0C0C0"を追加してアクセスします。下図の画面が表示されます。パラメーターにセットしたカラーコードに背景色が変更できました。


"?bgcolor=202020&fgcolor=00C000"を与えた場合の結果です。前景色も変更できています。


登録日 :2013-06-04    最終更新日 :2017-02-22
このページのタグ:[HTML] [JavaScript] [CSS スタイル変更]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)