JavaScriptのclassListを使ってみる

JavaScriptのclassListを使ってclassの設定を行う方法をメモ。

対応ブラウザ

classListはDOMTokenListオブジェクトの形でclass属性を返すプロパティで、この値を使ってclassの追加や削除を行えます。
classListの対応ブラウザはこちら
最新ブラウザであれば基本的には使用できますが、IE11では一部機能をサポートしていないので注意が必要です。

サンプルコード

まずは簡単にclassListを使ってみます。

<div id="sample" class="a b c">サンプル</div>

classListで返ってくる値をconsoleで表示してみます。

console.log(document.getElementById('sample').classList); // DOMTokenList(3) ["a", "b", "c", value: "a b c"]

コメントで記載しているように、DOMTokenListオブジェクトの形で返ってきます。
classListのデモページ1

DOMTokenListはlengthでclassの個数、item(index)でindex番目のclassの値、valueでclassの値を文字列で返します。

console.log(document.getElementById('sample').classList.length); // 3

console.log(document.getElementById('sample').classList.item(0)); // 'a';

console.log(document.getElementById('sample').classList.value); // 'a b c';

ただ試してみて気がついたのですが、valueはIEで非対応のようでした。
MDNのElement.classListのページだと特に記載がないようだったので、使用の際はご注意ください。
classListのデモページ2

次にclassの設定を変更できるメソッドを試してみます。

add()

add()はclassの追加ができます。
例として、ボタンクリックでclassを追加するようにしてみます。

<div id="sample">サンプル</div>
<button id="btn">変更</button>

追加するclassによってスタイルが変わるように適当にCSSを用意します。

.is-red {
	color: red;
}
.is-large {
font-size: 28px;
}

追加したいclass名をadd()で指定すればOKです。

document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.add('is-red');
});

ボタンクリック時にclassを追加することができました。
add()のデモページ1

カンマ区切りで複数のclassも設定できます。

document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.add('is-red', 'is-large');
});

ただしIEでは複数指定は対応しておらず、1つ目のclassのみ適用されます。
add()のデモページ2

配列の形で複数指定も可能です。

var classes = ['is-red', 'is-large'];
document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.add(...classes);
});

この方法はスプレッド構文を使用しているため、対応していないIEだと構文エラーになります。
add()のデモページ3

remove()

remove()は設定されているclassの削除ができます。
ボタンクリックでclassを削除するようにしてみます。

<div id="sample" class="is-red">サンプル</div>
<button id="btn">変更</button>

add()と同じく、削除したいclass名をremove()に指定します。

document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.remove('is-red');
});

remove()のデモページ1

複数指定もできますが、add()と同じくIEは対応していません。

<div id="sample" class="is-red is-large">サンプル</div>
<button id="btn">変更</button>

document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.remove('is-red', 'is-large');
});

remove()のデモページ2

スプレッド構文を使う方法も同様で、IEの場合は構文エラーになります。

var classes = ['is-red', 'is-large'];
document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.remove(...classes);
});

remove()のデモページ3

toggle()

toggle()は指定したclass名が既に付いている場合はclassを削除、ない場合はclassを追加します。

<div id="sample">サンプル</div>
<button id="btn">変更</button>

document.getElementById('btn').addEventListener('click', function() {
	document.getElementById('sample').classList.toggle('is-red');
});

toggle()のデモページ1

classの有無ではなく別の条件でclassの追加・削除を行うこともできます。
第二引数に条件式を設定します。

var i = 0;
document.getElementById('btn').addEventListener('click', function() {
	console.log(i);
	document.getElementById('sample').classList.toggle('is-red', i < 5);
	i++;
});

これでiが5未満(true)の場合はclassを追加、5以上(false)の場合はclassを削除するようになりました。
toggle()のデモページ2
ただし、toggle()の第二引数はIEで対応していないため、第二引数で設定した条件式ではなくclassの有無でclassの追加・削除が行われます。

contains()

contains()は指定したclassが含まれているかどうかを返します。
toggle()の実装をif文で置き換えてみます。

var i = 0;
document.getElementById('btn').addEventListener('click', function() {
	if(document.getElementById('sample').classList.contains('is-red')) {
		document.getElementById('sample').classList.remove('is-red');
	} else {
		document.getElementById('sample').classList.add('is-red');
	}
});

toggle()と同様、class名が既に付いている場合はclassを削除、ない場合はclassを追加するようになりました。
contains()のデモページ