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

このページのタグ:[HTML] [JavaScript] [CSS スタイル変更]
JavaScriptでCSS(スタイルシート) のクラスを動的に変更するコードを紹介します。

概要

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

プログラム

コード

下記の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";
    }
  }


 target = document.getElementById("important");
により、IDがimportantの要素を取得します。今回の場合は「<span id="important">重要</span>」の部分の要素が取得できます。


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

  <span id="important" class="importantText">重要</span>
の状態に変更されたことと同義になります。

実行結果

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


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

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