classListプロパティ、classNameプロパティ、setAttribute()メソッドの使い分け
JavaScriptで要素のクラスを変更する方法
classList プロパティは、要素のクラス属性を操作するための便利なプロパティです。 以下のメソッドを使って、クラスの追加、削除、切り替えなどを行うことができます。
- add() メソッド: クラスを追加します。
- toggle() メソッド: クラスの有無を切り替えます。
- contains() メソッド: 指定されたクラスが存在するかどうかを確認します。
以下の例では、classList プロパティを使って、要素に active クラスを追加しています。
const element = document.querySelector('.button');
element.classList.add('active');
className プロパティは、要素のクラス属性の値を直接設定します。 以下の例では、className プロパティを使って、要素のクラス属性を active に設定しています。
const element = document.querySelector('.button');
element.className = 'active';
setAttribute() メソッドを使って、要素の属性を設定することができます。 以下の例では、setAttribute() メソッドを使って、要素の class 属性を active に設定しています。
const element = document.querySelector('.button');
element.setAttribute('class', 'active');
JavaScriptで要素のクラスを変更するには、classList プロパティ、className プロパティ、setAttribute() メソッドのいずれかを使うことができます。 それぞれの方法にはメリットとデメリットがあるので、状況に合わせて使い分けることが重要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
</head>
<body>
<button class="button">ボタン</button>
<script>
// classListプロパティを使う
const button1 = document.querySelector('.button');
button1.classList.add('active');
// classNameプロパティを使う
const button2 = document.querySelector('.button');
button2.className = 'active';
// setAttribute()メソッドを使う
const button3 = document.querySelector('.button');
button3.setAttribute('class', 'active');
</script>
</body>
</html>
このコードを実行すると、3つのボタンすべてに active クラスが追加されます。
各方法の比較
| 方法 | メリット | デメリット |
|---|---|---|
classList プロパティ | モダンな方法 | 古いブラウザではサポートされていない |
className プロパティ | シンプル | クラス名の編集が難しい |
setAttribute() メソッド | 汎用性が高い | 属性名を覚える必要がある |
JavaScriptで要素のクラスを変更するには、いくつかの方法があります。 それぞれの方法にはメリットとデメリットがあるので、状況に合わせて使い分けることが重要です。
const element = document.querySelector('.button');
element.className = element.className.replace('button', 'active');
正規表現を使って、要素のクラス属性の値を編集することができます。 以下の例では、正規表現を使って、要素のクラス属性から button という文字列を削除しています。
const element = document.querySelector('.button');
element.className = element.className.replace(/button/g, '');
ライブラリを使う
jQueryなどのライブラリを使うと、要素のクラスを変更する操作を簡単に記述することができます。 以下の例では、jQueryを使って、要素に active クラスを追加しています。
$(document).ready(function() {
$('.button').addClass('active');
});
javascript html dom
