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

CSSのクラスを動的に変更する - JavaScript

JavaScriptでCSS(スタイルシート) のクラスを動的に変更するコードを紹介します。

概要

JavaScriptでクラス名を変更するには、要素のclassNameプロパティを変更します。

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

JavaScriptでCSSのスタイルを変更するコードについてはこちらの記事を参照して下さい。

プログラム

コード

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

JavaScriptChangeCssClass.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function buttonClick() {
            target = document.getElementById("important");
            if (target != null) {
                target.className = "importantText";
            }
        }
    </script>
    <link rel="stylesheet" type="text/css" href="JavaScriptChangeCssClass.css"/>
</head>
<body>
    <p>このドキュメントは<span id="important">重要</span>です。取り扱いに注意してください。</p>
    <input id="Button1" type="button" value="button" onclick="buttonClick();"/>
</body>
</html>

JavaScriptChangeCssClass.css

.importantText{
   font-weight:700;
   color:#FF0000;
}

解説

ボタンをクリックすることで下記のJavaScriptを実行します。

  function buttonClick() {
    target = document.getElementById("important");
    if (target != null) {
      target.className = "importantText";
    }
  }

下記のコードで、IDがimportantの要素を取得します。今回の場合は「<span id="important">重要</span>」の部分の要素が取得できます。

 target = document.getElementById("important");

要素が取得できた場合は非nullの値となるため、if文内が実行されます。className プロパティに代入することで、要素のclassを設定できます。今回の例では、"importantText"をクラス名に設定しています。

  if (target != null) {
    target.className = "importantText";
  }

上記のコードが実行されることで、HTMLは下記の状態に変更されたことと同義になります。

  <span id="important" class="importantText">重要</span>

実行結果

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

[button]をクリックします。「重要」の文字色が赤になりフォントも太字になります。

プログラム : サブクラスを設定する例

コード

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

JavaScriptChangeCssSubClass.css

.frame {
  width:320px;
  height:64px;
  border:solid 1px #009413;
}

.frame.highlight {
  background-color:#ffec85;
}

  .frame.highlight.important {
    border: 2px solid #ff6a00;
  }

JavaScriptChangeCssSubClass.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    function buttonClick() {
      target = document.getElementById("frame01");
      if (target != null) {
        target.className = "frame highlight important";
      }
    }
  </script>
  <link rel="stylesheet" type="text/css" href="JavaScriptChangeCssSubClass.css" />
</head>
<body>
  <div id="frame01" class="frame">枠です。</div>
  <hr/>
  <input id="Button1" type="button" value="SetSubClass" onclick="buttonClick();" />
</body>
</html>

解説

[SetSubClass]ボタンをクリックすると下記のコードを実行します。
getElementById() メソッドを呼び出し、id="frame01" の要素を取得します。要素が取得できた場合は、要素のclassName プロパティに frame highlight important のクラス名を設定します。

  function buttonClick() {
    target = document.getElementById("frame01");
    if (target != null) {
      target.className = "frame highlight important";
    }
  }

cssでは frame クラス frame highlight サブクラス frame highlight important サブサブクラスの２つのクラスのスタイルを記述しています。
frame highlight importantクラスが指定されると、記述した3つの記述がすべて適用されます。

.frame {
  width:320px;
  height:64px;
  border:solid 1px #009413;
}

.frame.highlight {
  background-color:#ffec85;
}

  .frame.highlight.important {
    border: 2px solid #ff6a00;
  }

実行結果

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

[SetSubClass]ボタンをクリックします。highlight サブクラスと important サブサブクラスが適用されます。highlightサブクラスに設定されているスタイルにより枠の背景色が黄色に変わります。また、important サブサブクラスに設定されているスタイルにより、枠の線が2pxになり、枠線の色がオレンジ色に変わります。

補足

既に設定してあるクラスを維持した状態で、サブクラスを追加する場合やサブクラスを削除(解除)する場合はclassListプロパティを利用します。 classListプロパティの利用についてはこちらの記事を参照して下さい。

著者

Penta

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

目次

CSSのクラスを動的に変更する - JavaScript

概要

プログラム

コード

解説

実行結果

プログラム : サブクラスを設定する例

コード

解説

実行結果

補足

関連するページ