【JavaScript】classの値を取得・追加・削除など|classListプロパティ・メソッド

今回はJavaScriptで、ElementオブジェクトのclassListプロパティのメソッドを利用し、classの属性値を扱う例となります。

classListプロパティ

ElementオブジェクトのclassListプロパティは、オブジェクトに指定した要素のclassの値を、DOMTokenListとして返しします。

以下は、ElementのclassListプロパティとDOMTokenListのvalueプロパティでclassの値を取得する例となります。

<div id="main" class="foo bar">メイン</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
	var element = document.getElementById('main');
	var classes = element.classList.value;
	console.log(classes);
});
</script>

上記例のconsole.log()の出力結果は、foo barとなります。

classListプロパティのメソッド

classListプロパティではメソッドを利用することで、classの属性値の追加・削除などが行えます。以下、classListプロパティのメソッドを利用した例となります。

add()|classの値を追加

addメソッドは、引数に指定した文字列をclassの値に追加します。複数の追加する場合には文字列をカンマで区切ります。

addメソッドの例

var element = document.getElementById('main');
// classの値にbaz quxを追加
var classes = element.classList.add('baz', 'qux');

remove()|classの値を削除

removeメソッドは、引数に指定した文字列がclassの値にある場合に削除します。複数の削除する場合には文字列をカンマで区切ります。

removeメソッドの例

var element = document.getElementById('main');
// classの値からfoo barを削除
var classes = element.classList.remove('foo', 'bar');

toggle()|classの値を切り替え

toggleメソッドは、以下の通りclassの値を切り替えます。

引数が1つの場合

引数に指定した文字列がclassの値にある場合は削除しfalseを返し、ない場合は追加してtrueを返します。

引数が2つの場合

第2引数がある場合は、第2引数に指定した条件が true となる場合、第1引数の文字列をclassの値に追加し、 false の場合は削除します。

toggleメソッドの例

var element = document.getElementById('main');
var force = element.innerText == 'メイン'
// 第2引数の条件がtrue となる場合、classの値にfooを追加し、falseの場合は削除
var classes = element.classList.toggle('foo', force);

replace()|classの値を置換

replaceメソッドは、第1引数に指定した文字列がclassの値にある場合、そのclassの値を第2引数で指定した文字列で置き換えtrueを返し、ない場合にはfalseを返します。

replaceメソッドの例

var element = document.getElementById('main');
// classの値にfooがある場合、bazに置換
var classes = element.classList.replace('foo', 'baz');

contains()|classの値を確認

containsメソッドは、引数に指定した文字列が classの値にあるかを確認します。ある場合にはtrueを返し、ない場合にはfalseを返します。

containsメソッドの例

var element = document.getElementById('main');
// classの値にfooがあるかを確認
var classes = element.classList.contains('foo');

item()|指定した順番のclassの値を取得

itemメソッドは、引数に指定した数字の順番にあるclassの値を取得します。classの値がない場合にはnullを返します。

itemメソッドの例

var element = document.getElementById('main');
// classの値の中で2番目の値を取得
var classes = element.classList.item(1);

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。