classListプロパティを使って要素にクラスを追加する方法
2024-04-02
JavaScriptで要素にクラスを追加するには、主に以下の3つの方法があります。
classListプロパティを使うclassName属性を直接操作するsetAttribute()メソッドを使う
classList プロパティは、要素のクラス属性を操作するための便利なプロパティです。このプロパティを使うと、以下のメソッドを使って簡単にクラスを追加できます。
add()メソッド：要素にクラスを追加します。toggle()メソッド：要素にクラスが存在する場合は削除し、存在しない場合は追加します。
例
const element = document.getElementById("my-element");
// クラス "active" を追加
element.classList.add("active");
// クラス "active" を削除
element.classList.remove("active");
// クラス "active" が存在する場合は削除し、存在しない場合は追加
element.classList.toggle("active");
className 属性を直接操作することで、要素のクラスを追加することもできます。ただし、この方法を使う場合は、空白文字や重複するクラス名などに注意する必要があります。
const element = document.getElementById("my-element");
// クラス "active" を追加
element.className += " active";
// クラス "active" を削除
element.className = element.className.replace(" active", "");
setAttribute() メソッドを使って、class 属性の値を設定することで、要素にクラスを追加することもできます。
const element = document.getElementById("my-element");
// クラス "active" を追加
element.setAttribute("class", "active");
上記の3つの方法の中で、一般的には classList プロパティを使うのが最も簡単で効率的です。ただし、IE9 などの古いブラウザでは classList プロパティがサポートされていないため、その場合は className 属性を直接操作するなどの方法を使う必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div id="my-element">要素</div>
<script>
const element = document.getElementById("my-element");
// 方法1: classList プロパティを使う
// クラス "active" を追加
element.classList.add("active");
// 方法2: className 属性を直接操作する
// クラス "active" を追加
element.className += " active";
// 方法3: setAttribute() メソッドを使う
// クラス "active" を追加
element.setAttribute("class", "active");
</script>
</body>
</html>
このコードを実行すると、#my-element 要素にクラス "active" が追加されます。
- クラス "active" を要素に存在する場合は削除し、存在しない場合は追加する
element.classList.toggle("active");
- 複数のクラスを要素に追加する
element.classList.add("active", "disabled");
- 要素からすべてのクラスを削除する
element.classList.remove();
JavaScriptで要素にクラスを追加するその他の方法
jQueryは、JavaScriptをより簡単に操作するためのライブラリです。jQueryを使うと、以下のコードのように簡単に要素にクラスを追加できます。
$("#my-element").addClass("active");
$("my-element").addClassName("active");
自作の関数を使う
上記の方法以外にも、自作の関数を使って要素にクラスを追加することもできます。
function addClass(element, className) {
if (!element.classList.contains(className)) {
element.classList.add(className);
}
}
const element = document.getElementById("my-element");
addClass(element, "active");
- jQueryやPrototype.jsなどのライブラリをすでに使っている場合は、そのライブラリのメソッドを使うのが最も簡単です。
- ライブラリを使いたくない場合は、
classListプロパティを使うのが最も効率的です。 - より複雑な処理を行う場合は、自作の関数を使うことができます。
javascript dom-manipulation
