要素にクラスを追加、削除する - クラスリストのトグルによるクラスの追加と削除の切り替え - JavaScript
クラスリストのトグルによるクラスの追加と削除の切り替えで要素にクラスを追加、削除するコードを紹介します。
概要
クラスリストのトグルを利用すると、指定したクラスが無い場合にはしてクラスを要素に追加し、指定したクラスがある場合は、要素から指定クラスを削除する動作を実装できます。イベント発生によりクラスの切り替えを実装できます。
プログラム例
コード
下記の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="ClassListToggleDemo.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.toggle('selected');
}
</script>
</head>
<body onload="onPageLoad();">
<ul id="MyList">
<li>ぺんぎんクッキー</li>
<li>しろくまアイス</li>
<li>らくだキャラメル</li>
<li>ふくろうサブレ</li>
<li>あひるケーキ</li>
</ul>
</body>
</html>
解説
ページ読み込み時に onPageLoad()関数が呼び出されます。
querySelectorAllメソッドを呼び出し、IDに
MyListを持つ要素の子要素の
liタグの要素を取得します。取得した要素に対し、addEventListerner() メソッドを呼び出しイベントリスナを設定します。今回のコードではclickイベントのイベントリスナを設定します。この処理により、ulリストのliタグの項目をクリックすると、ListItemClick() 関数が呼び出される動作になります。~
function onPageLoad() {
var cols = document.querySelectorAll('#MyList li');
for (i = 0; i < cols.length; i++) {
cols[i].addEventListener('click', ListItemClick, false);
}
}
リストの項目をクリックすると下記のコードが実行されます。thisにはクリックしたオブジェクトの要素になります。classListオブジェクトのtoggleメソッドを呼び出しクラスを設定します。今回のコードでは、
selectedクラスが要素に設定されてなければ、
selectedクラスを追加し、要素に設定されていなければ
selectedクラスを削除します。
function ListItemClick(event) {
this.classList.toggle('selected');
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
リストの項目をクリックします。クリックすると、selectedクラスが追加され、項目のテキストカラーが水色に変わり、フォントの太さが太くなります。
もう一度クリックすると、selectedクラスが解除され、テキストカラーとフォントの太さが元に戻ります。
他の項目もクリックすると、水色に変わり、もう一度クリックすると、元のスタイルに戻ります。
クラスリストを利用したトグルのスタイルの追加や削除ができました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
