[JavaScript]classListを使って楽にクラスを操作する

javascript

JavaScriptのclassListの使い方について。

わざわざjQueryを使わずともクラス操作が出来てしまう便利機能です。

classListを使ってみる

document.querySelector('.hoge').classList.replace('active', 'non-active');

上記のコードだとhogeクラスを取得して、activeをnon-activeに変換しました。

<div class=’hoge active’> → <div class=’hoge non-active’> こんな感じです。

その他にもclassListには様々なメソッドが用意されています。

メソッド 内容
add クラスを追加
remove クラスを削除
toggle クラスの切り替え
contains 特定クラスが含まれているかのチェック

 

ざっくり書くとこんな感じです。



カテゴリー