iPentec.com  /  Doc  /  JavaScript  /  CSS classList

目次

JavaScriptを利用して要素のクラスやサブクラスを動的に設定する - JavaScript

JavaScriptを利用して要素のクラスやサブクラスを動的に設定するコードを紹介します。

概要

こちらの記事では、classNameプロパティを変更して、要素のクラスを変更するコードを紹介しました。この方法では要素のクラスを変更できますが、サブクラスを登録する場合などには対応できません。 JavaScriptを利用して要素のサブクラスを変更するには、classListプロパティを利用します。

書式

クラスを追加
(要素のオブジェクト).classList.add("追加するクラス名")
クラスを削除
(要素のオブジェクト).classList.remove("削除するクラス名")
classListにクラスが存在する場合は削除、存在しない場合は追加 (トグル処理)
(要素のオブジェクト).classList.toggle("クラス名")

プログラム : クラスの追加

コード

下記のHTML, CSSファイルを作成します。
SimpleClassListDemo.css
ul li{
    font-size:14px;
}

.selected {
    color: #0070e9;
    font-weight: 700;
}
SimpleClassListDemo.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" ype="text/css" href="SimpleClassListDemo.css" />
  <script type="text/javascript">
    function onPageLoad() {
      var cols = document.querySelectorAll('#MyList li');
      for (i = 0; i < cols.length; i++) {
        cols[i].addEventListener('click', ListItemClick, false);
      }
    }

    function ListItemClick(event) {
      this.classList.add('selected');
    }
  </script>
</head>
<body onload="onPageLoad();">
  <ul id="MyList">
    <li>ぺんぎんクッキー</li>
    <li>しろくまアイス</li>
    <li>らくだキャラメル</li>
    <li>ふくろうサブレ</li>
    <li>あひるケーキ</li>
  </ul>
</body>
</html>

解説

body onload="onPageLoad();"の記述によりページのロード完了後 onPageLoad()関数が呼び出されます。onPageLoad関数では、querySelectorAllメソッドを呼び出し、IDがMyListの要素の子要素のliタグの要素を取得し、colsコレクション変数に格納します。その後、colsコレクションの要素1つずつに対して、addEventListenerメソッドを呼び出し、clickイベントを割り当てています。割り当てるイベントハンドラはListItemClick()関数を指定します。
function onPageLoad() {
  var cols = document.querySelectorAll('#MyList li');
  for (i = 0; i < cols.length; i++) {
    cols[i].addEventListener('click', ListItemClick, false);
  }
}

ListItemClick 関数では、classList.add メソッドを呼び出しリストにクラスを追加します。今回の例では selected クラスを追加しています。
function ListItemClick(event) {
  this.classList.add('selected');
}

実行結果

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


リストの項目をクリックすると、クリックした項目のテキストの色とフォントの太さが変化します。


別の項目をクリックすると、クリックした項目のテキストカラーとフォントウェイトが変化します。

プログラム : サブクラスの追加、削除

コード

以下のHTML, CSSファイルを作成します。
JavaScriptAddCssClass.css
.frame {
  width:320px;
  height:64px;
  border:1px solid #ff6a00;
}

.frame.subclass1 {
  background-color:#ddff87;
}
JavaScriptAddCssClass.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="JavaScriptAddCssClass.css" />
  <script type="text/javascript">
    function exec_add_subclass() {
      var elem = document.getElementById("frame1");
      elem.classList.add("subclass1");
    }

    function exec_remove_subclass() {
      var elem = document.getElementById("frame1");
      elem.classList.remove("subclass1");
    }
  </script>
</head>
<body>
  <div id="frame1" class="frame">
    枠です。
  </div>

  <hr />
  <button onclick="exec_add_subclass();">Add SubClass</button>
  <button onclick="exec_remove_subclass();">Remove SubClass</button>
</body>
</html>

解説

HTMLの記述で id="frame1" の要素に "frame" クラスを設定します。
  <div id="frame1" class="frame">
    枠です。
  </div>

[Add SubClass]ボタンのクリックにより、下記のコードが実行されます。
getElementById メソッドを呼び出し id="frame1"の要素を取得します。取得した要素の classListプロパティのaddメソッドを呼び出し、クラスを追加します。 下記のコードでは、"subclass1"クラスを追加しています。
  function exec_add_subclass() {
    var elem = document.getElementById("frame1");
    elem.classList.add("subclass1");
  }

subclass1 クラスが追加されるとこで、id="frame1" の要素のクラス名は frame subclass1 となり、下記のサブクラスのスタイルが適用されます。 サブクラスのスタイルにはbackground-colorプロパティが記述されており、要素の背景色が変割ります。
.frame.subclass1 {
  background-color:#ddff87;
}

また、[Remove SubClass]のボタンがクリックされた場合は下記のコードが実行されます。
先のサブクラス追加のコードとほぼ同じですが、classListに対する操作メソッドが remove メソッドの呼び出しになっており、classListプロパティから "subclass1" のクラスを 削除するコードになります。サブクラスが削除されると、 id="frame1" の要素のクラス名は frame に戻りますので、.frame.subclass1 クラスの適応は無くなり、背景色が元に戻ります。
  function exec_remove_subclass() {
    var elem = document.getElementById("frame1");
    elem.classList.remove("subclass1");
  }

実行結果

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


[Add SubClass]ボタンをクリックします。subclass1サブクラスが適用され、frame subclass1 となり、枠の背景色が変わります。


枠の背景色が黄緑に変わっている状態で、[Remove SubClass]ボタンをクリックします。subclass1 サブクラスが要素から除外され、frame クラスとなります。 .frame.subclass1 のスタイルの適用ではなくなるため、背景色が元の色に戻ります。


JavaScriptを利用して、動的にサブクラスを設定することができました。

プログラム : トグル処理の動作、複数のサブクラスの適用

コード

下記のHTML, JavaScriptファイルを作成します。
JavaScriptAddCssClass.css
.frame {
  width:320px;
  height:64px;
  border:1px solid #ff6a00;
}

.frame.subclass1 {
  background-color:#ddff87;
}

  .frame.subclass2 {
    border: 1px solid #1b81ff;
    background-color: #9de1ff;
  }

    .frame.subclass2.subsubclass1 {
      width: 480px;
    }
JavaScriptAddCssClass.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="JavaScriptAddCssClass.css" />
  <script type="text/javascript">
    function exec_add_sub_subclass() {
      var elem = document.getElementById("frame1");
      elem.classList.toggle("subclass2");
      elem.classList.toggle("subsubclass1");
    }

  </script>
</head>
<body>
  <div id="frame1" class="frame">
    枠です。
  </div>

  <hr />

  <button onclick="exec_add_sub_subclass();">Toggle Sub SubClass</button>
</body>
</html>

解説

[Toggle Sub SubClass]ボタンをクリックすると下記のコードが実行されます。
getElementById メソッドを呼び出し、id="frame1"の要素を取得します。取得した要素のオブジェクトのclassListプロパティのtoggleメソッドを呼び出します。
toggleメソッドでは sublass2 と subsbuclass1 の2つのクラスを設定します。classListに toggleメソッドで与えたクラス名が存在していない場合は classListにクラス名を設定します。 clsssList にtoggleメソッドで与えたクラス名が存在しいている場合は、classListからクラス名を削除します。
この処理によりボタンをクリックするごとに、サブクラスが設定された状態と、設定されていない状態が交互に切り替わります。
クラスのトグル処理の詳細についてはこちらの記事を参照して下さい。 
  function exec_add_sub_subclass() {
    var elem = document.getElementById("frame1");
    elem.classList.toggle("subclass2");
    elem.classList.toggle("subsubclass1");
  }

.frame.subclass2 の設定により枠の色が青になり、背景色が水色になります。
.frame.subclass2.subsubclass1 の設定により枠の幅が480pxに広がります。
  .frame.subclass2 {
    border: 1px solid #1b81ff;
    background-color: #9de1ff;
  }

    .frame.subclass2.subsubclass1 {
      width: 480px;
    }

実行結果

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


[Toggle Sub SubClass] ボタンをクリックします。 subclass2 と subsubclass1 のスタイルが適用され、枠の色が青くなり、背景色も水色に変わります。また、枠の横幅も480pxに広がります。


もう一度 [Toggle Sub SubClass] ボタンをクリックするとsubclass2 と subsubclass1 のスタイルの適用が外れ、枠の幅、枠の色、背景色が元のスタイルに戻ります。

このページのキーワード
  • JSを利用して要素のクラスやサブクラスを動的に設定する
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2020-04-26
作成日: 2020-04-25
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.