classListのadd・removeでクラス名を追加・削除する【JavaScript】

この記事ではclassListを使ってclass名を追加削除していきます。

使うのは、classList.addとclassList.removeです。

classList

classListはclass属性を扱います。

classListのメソッドとして、add、remove、item、toggle、contains、replaceなどがあります。

この記事ではadd、removeを取り上げます。

classList.add

element.classList.addという形式で使います。

デモ

実行をクリックするとイベントが発火し、classList.addが実行されます。

サンプルコード

#targetにクラス名「sample」を追加しています。クラス名sampleは、color:redなので文字色が変わります。

function addClass () {
	var target = document.getElementById('target');
	target.classList.add('sample');
}

<div id="target">ターゲット</div>
<button onclick="addClass();">実行</button>

.sample {
  color: red;
}

classList.remove

element.classList.removeという形式で使います。

デモ

サンプルコード

#targetにあるクラス名「sample」を削除しています。クラス名sampleは、color:redなので文字色が変わります。

function removeClass () {
	var target = document.getElementById('target');
	target.classList.remove('sample');
}

<div id="target" class="sample">ターゲット</div>
<button onclick="removeClass();">実行</button>

.sample {
  color: red;
}