要素のクラスやサブクラスを動的に設定する - classListプロパティの利用
JavaScriptを利用して要素のクラスやサブクラスを動的に設定するコードを紹介します。
概要
こちらの記事では、classNameプロパティを変更して、要素のクラスを変更するコードを紹介しました。
この方法では要素のクラスを変更できますが、
JavaScriptを利用して要素のサブクラスを変更するには、classListプロパティを利用します。
書式
クラスを追加
(要素のオブジェクト).classList.add("追加するクラス名")
クラスを削除
(要素のオブジェクト).classList.remove("削除するクラス名")
classListにクラスが存在する場合は削除、存在しない場合は追加 (トグル処理)
(要素のオブジェクト).classList.toggle("クラス名")
プログラム : クラスの追加
コード
下記のHTML, CSSファイルを作成します。
ul li{
font-size:14px;
}
.selected {
color: #0070e9;
font-weight: 700;
}
<!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ファイルを作成します。
.frame {
width:320px;
height:64px;
border:1px solid #ff6a00;
}
.frame.subclass1 {
background-color:#ddff87;
}
<!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ファイルを作成します。
.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;
}
<!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 のスタイルの適用が外れ、枠の幅、枠の色、背景色が元のスタイルに戻ります。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
