iPentec.com / Doc / HTML / JavaScript / CSS / CSS スタイル変更

CSSのスタイルを動的に変更する - JavaScript

JavaScriptを利用して要素のCSSスタイルを動的に変更するコードを紹介します。

補足:CSSのクラスを書き換える場合

CSSのクラスを動的に変更することでも、スタイルを変更できます。JavaScriptで要素のCSSクラスを書き換えるコードについてはこちらの記事を参照して下さい。

概要

avaScriptでページ表示後に動的に文字のサイズやレイアウト、枠の色などを変更したい場合があります。
JavaScriptでCSSのスタイルを変更する場合は、HTML要素のDOMオブジェクトを取得し、style プロパティを変更します。

書式

(要素のオブジェクト).style.(スタイルのプロパティ) = "(変更したい値)";

スタイルのプロパティには、代表的なものとして以下があります。

スタイルプロパティ	意味
color	文字の色
backgroundColor	背景色
fontSize	文字サイズ
border	枠線
margin	マージン
padding	パディング

実装例1

コード

以下のHTLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>

  <script type="text/javascript" language="javascript">
    function BtnClick() {
      target = document.getElementById("frame01");
      target.style.backgroundColor = "#4040FF";
      target.style.color = "#FFFFFF";
    }
  </script>
</head>
<body>
  <div id="frame01">Hello World!!</div>
  <hr/>
  <button onclick="BtnClick()">Change</button>
</body>
</html>

解説

画面に表示されるボタンにonclickイベントを設定します。ボタンをクリックすると上記のBtnClick()関数を実行します。
BtnClick()関数では、getElementByIdメソッドを呼び出し、frame01の要素のオブジェクトを取得します。取得したオブジェクトのスタイルを変更する場合は、取得した要素のstyleプロパティを変更します。今回の例では"style.backgroundColor"で背景色を、"style.color"で文字色を設定しています。

function BtnClick() {
  target = document.getElementById("frame01");
  target.style.backgroundColor = "#4040FF";
  target.style.color = "#FFFFFF";
}

実行結果

HTMLを表示すると下図の画面が表示されます。

[Change]ボタンをクリックすると背景色と文字色が変わり下図の画面になります。

JavaScriptのコードから要素のスタイルを変更できました。

実装例2

コード

以下のHTLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>

  <script type="text/javascript" language="javascript">
    function BtnClick() {
      target = document.getElementById("frame01");
      target.style.backgroundColor = "#E0F0C0";
      target.style.margin = "2rem 2rem 2rem 2rem";
      target.style.padding = "0.5rem 0.5rem 0.5rem 0.5rem";
      target.style.fontSize="1.5rem";
    }
  </script>
</head>
<body>
  <div id="frame02" style="border:1px solid gray; background-color:#F0F0F0;">
    <div id="frame01"  style="border:1px solid orange; margin: 1rem 1rem 1rem 1rem; background-color:#F0E0E0;">
      Hello JavaScript World!!
    </div>
  </div>
  <hr />
  <button onclick="BtnClick()">Change</button>
</body>
</html>

解説

画面に表示されるボタンにonclickイベントを設定します。ボタンをクリックすると上記のBtnClick()関数を実行します。
BtnClick()関数では、getElementByIdメソッドを呼び出し、frame01の要素のオブジェクトを取得します。今回の例では"style.backgroundColor"で背景色を、"style.margin", "style.padding"でマージンとパディング、 "style.fontSize"で文字サイズを変更しています。

function BtnClick() {
  target = document.getElementById("frame01");
  target.style.backgroundColor = "#E0F0C0";
  target.style.margin = "2rem 2rem 2rem 2rem";
  target.style.padding = "0.5rem 0.5rem 0.5rem 0.5rem";
  target.style.fontSize="1.5rem";
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[Change]ボタンをクリックすると内側の枠のマージンとパディングが変化します。また、内側の枠の背景色と文字のサイズも変化し、下図の画面になります。

実装例3

コード

下記のCSS、HTMLファイルを作成します。

JavaScriptChangeCssStyle.css

.Frame{
  width:320px;
  border:1px solid #ff6a00;
  background-color:#ffee8e;
}

JavaScriptChangeCssStyle.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="JavaScriptChangeCssStyle.css" />
  <script type="text/javascript">
    function onClick() {
      var elem = document.getElementById("elem01");
      elem.style.border = "2px dotted #00bfa5";
      elem.style.backgroundColor = "#c3ebff";
    }
  </script>
</head>
<body>
  <div id ="elem01" class="Frame">
    テスト<br/>
    ABCDEFG<br/>
    あいうえお<br/>
  </div>
  <hr/>
  <a href="javascript:onClick()">スタイル変更</a>
</body>
</html>

解説

ページ内の id=elem01 枠のスタイルを[スタイル変更]のリンクがクリックされたタイミングで変更します。
elem01にはFrameクラスを指定しており、デフォルトの表示スタイルはCSSに記載されている表示が適用されます。

.Frame{
  width:320px;
  border:1px solid #ff6a00;
  background-color:#ffee8e;
}

[スタイル変更]リンクがクリックされると、下記のonClick()関数を実行します。
getElementById()関数を呼び出しHTMLの id=elem01 の要素を取得します。
取得した要素のstyleオブジェクトのborderに CSSの border プロパティの変更後の値を代入します。
また、styleオブジェクトのbackgroundColorにCSSの background-color プロパティの変更後の値を代入します。

    function onClick() {
      var elem = document.getElementById("elem01");
      elem.style.border = "2px dotted #00bfa5";
      elem.style.backgroundColor = "#c3ebff";
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[スタイル変更]リンクをクリックします。border と background-color のスタイルが変更され、枠線と背景色が変化します。

補足

先のコードでは style オブジェクト内のプロパティに値を代入してスタイルを変更しましたが、下記のコードで style オブジェクトにCSSの文字列を直接代入するコードでもスタイルを変更できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="JavaScriptChangeCssStyle.css" />
  <script type="text/javascript">
    function onClick() {
      var elem = document.getElementById("elem01");
      elem.style = "border:2px dotted #00bfa5; background-color:#c3ebff;";
    }
  </script>
</head>
<body>
  <div id ="elem01" class="Frame">
    テスト<br/>
    ABCDEFG<br/>
    あいうえお<br/>
  </div>
  <hr/>
  <a href="javascript:onClick()">スタイル変更</a>
</body>
</html>

実装例4

コード

以下のHTMLファイルを作成します。

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()関数を実行します。

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

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

実行結果

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

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

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

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

実装例5

コード

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"を与えた場合の結果です。前景色も変更できています。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

CSSのスタイルを動的に変更する - JavaScript

概要

書式

実装例1

コード

解説

実行結果

実装例2

コード

解説

実行結果

実装例3

コード

解説

実行結果

補足

実装例4

コード

解説

実行結果

実装例5

コード

解説

実行結果

関連するページ