【JavaScript】classの値を取得・追加・削除・変更など｜classListでCSSのclassを扱う

今回はJavaScriptで、classListのメソッドを利用し、CSSのclassの属性値を扱う方法となります。

classList.value｜classの値を取得

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

それらを利用することにより、以下のように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);
}, false);
</script>

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

メソッドを利用してclassの属性値を扱う方法

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);