[JavaScript] 要素にclassを追加・削除する（classList）

投稿日：2017年7月2日更新日：2018年5月3日

JavaScriptで、要素にclassを追加・削除するサンプルです。

サンプルソース

例）要素にclassを追加・削除する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function test(){
  var obj = document.getElementById("dv1");

  //要素に設定されているclassの一覧を取得する
  var list = obj.classList;
  console.log(list);

  //要素にclass="hoge"を追加する
  obj.classList.add("hoge");
  console.log(obj.classList);

  //要素からclass="cs2"を削除する
  obj.classList.remove("cs2");
  console.log(obj.classList);

  //要素にclass="cs3"が含まれているか判定する
  var result = obj.classList.contains("cs3");
  console.log(result);

  //要素にclass="cs3"が含まれていれば削除、含まれなければ追加する
  obj.classList.toggle("cs3");
  console.log(result.classList);
}
</script>
</head>
<body>
  <div id="dv1" class="cs1 cs2 cs3">aa</div>
  <input type="button" value="ボタン" onclick="test();">
</body>
</html>

<!DOCTYPE html>

<head>

function test(){

var obj = document.getElementById("dv1");

//要素に設定されているclassの一覧を取得する

var list = obj.classList;

console.log(list);

//要素にclass="hoge"を追加する

obj.classList.add("hoge");

console.log(obj.classList);

//要素からclass="cs2"を削除する

obj.classList.remove("cs2");

console.log(obj.classList);

//要素にclass="cs3"が含まれているか判定する

var result = obj.classList.contains("cs3");

console.log(result);

//要素にclass="cs3"が含まれていれば削除、含まれなければ追加する

obj.classList.toggle("cs3");

console.log(result.classList);

}

</script>

</head>

<body>

</body>

</html>

（結果）: ["cs1", "cs2", "cs3"] ["cs1", "cs2", "cs3", "hoge"] ["cs1", "cs3", "hoge"] true ["cs1", "hoge"]

解説

classを追加するには、classList.addを使用します。
classを削除するには、classList.removeを使用します。
classが存在するか判定するには、classList.containsを使用します。
classの追加/削除を切り替えるには、classList.toggleを使用します。
（指定したclassが既に存在する場合は削除、存在しない場合は追加します。）

執筆者：とら

【JavaScript】要素にclass名を追加・削除する方法 – 株式会社シーポイントラボ｜浜松のシステム・RTK-GNSS開発より:

2020年3月9日 6:46 PM

[…] [JavaScript] 要素にclassを追加・削除する（classList） | コピペで使える JavaScrip… https://javascript.programmer-reference.com/js-classlist/ […]

返信
【Tampermonkey】「任意の場所に要素を追加する」スクリプト | nyanco! ブログより:

2020年6月28日 10:01 PM

[…] 要素の追加 (append)www9.plala.or.jp [JavaScript] 要素にclassを追加・削除す&#… […]

返信

comment コメントをキャンセル