【javascript】classListプロパティでクラスの追加、削除、クラスの切り替えをする方法

今回は要素に対してクラスの追加、クラスの削除、クラスの切り替え方法などについて紹介していきたいと思います。

javascriptではclassListを使用することでHTMLのクラスなどを操作することができます。

要素にクラスを追加したい

addメソッドを使うことで要素にクラスを追加することができます。

elem.classList.add('add-class');

上記では「add-class」クラスを追加します。

複数のクラスを追加したい

カンマで区切ることで複数のクラスを追加することができます。

elem.classList.add('add-class1','add-class2');

上記では「add-class1」と「add-class2」クラスを追加します。

要素のクラスを削除する

removeメソッドを使うことで要素のクラスを削除することができます。

elem.classList.remove('remove-class');

上記では「remove-class」クラスを削除します。

要素のクラスを切り替える

toggleメソッドを使うことで要素のクラスを削除することができます。

elem.classList.toggle('change-class');

上記では「 change-class 」クラスを切り替えます。

classList（add、remove、toggle）の動作を確認してみよう

それでは上記で紹介したメソッドを実際に指定して確認してみましょう。

html

<div id="add">要素にクラスを追加する</div>
<div id="add1">複数のクラスを追加したい</div>
<div id="remove" class="remove">要素のクラスを削除する</div>
<div id="change">クラスを切り替える</div>
<button id="btn">ボタン</button>

javascript

//クラス追加
let elem = document.getElementById('add');
elem.classList.add('add-class');

//クラス追加（複数）
let elem1 = document.getElementById('add1');
elem1.classList.add('add-class', 'add-item');

//クラスの削除
let elem2 = document.getElementById('remove');
elem2.classList.remove('remove');

//クラスを切り替える
let elem3 = document.getElementById('change');
let btn = document.getElementById('btn');
btn.onclick = btnClick;

function btnClick(){
	elem2.classList.toggle('change-class');
}

サンプル