classListで複数のHTML要素をまとめて操作？ JavaScriptでスマートなWebページ制作

2024-05-13

JavaScript で classList を使って複数のクラスを一度に追加・削除する方法

複数のクラスを追加する方法

以下のコード例のように、classList.add() メソッドにカンマ区切りでクラス名を複数指定することで、複数のクラスを一度に追加できます。

const element = document.getElementById('myElement');
element.classList.add('class1', 'class2', 'class3');

このコードを実行すると、myElement 要素に class1、class2、class3 というクラスが追加されます。

複数のクラスを削除する方法

const element = document.getElementById('myElement');
element.classList.remove('class1', 'class2', 'class3');

複数のクラスを操作するその他の方法

classList.toggle() メソッド: 特定のクラスが存在するかどうかを確認し、存在する場合は削除、存在しない場合は追加します。
classList.replace() メソッド: 既存のクラスをすべて削除してから、新しいクラスを追加します。

classList を使うことで、JavaScript でより簡潔かつ分かりやすく、複数のクラスを操作することができます。ぜひ、上記を参考に試してみてください。

HTML:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>classList サンプル</title>
</head>
<body>
  <div id="myElement" class="initial-class">要素</div>

  <script src="script.js"></script>
</body>
</html>

JavaScript:

const element = document.getElementById('myElement');

// クラスを追加
element.classList.add('added-class1', 'added-class2');
console.log(element.classList); // => 'initial-class added-class1 added-class2'

// 特定のクラスを削除
element.classList.remove('initial-class');
console.log(element.classList); // => 'added-class1 added-class2'

// すべてのクラスを削除してから、新しいクラスを追加
element.classList.replace('added-class1', 'added-class3');
console.log(element.classList); // => 'added-class3'

このコードを実行すると、以下の結果が出力されます。

[initial-class, added-class1, added-class2]
[added-class1, added-class2]
[added-class3]

このサンプルコードを参考に、classList を活用して、さまざまなクラス操作を試してみてください。

以下の例では、classList を使って、要素に条件に応じてクラスを追加・削除する方法を示しています。

例1: 要素がクリックされたらクラスを追加

const element = document.getElementById('myElement');

element.addEventListener('click', () => {
  element.classList.add('active');
});

例2: 要素がホバーされたらクラスを追加、マウスアウトしたら削除

const element = document.getElementById('myElement');

element.addEventListener('mouseover', () => {
  element.classList.add('hover');
});

element.addEventListener('mouseout', () => {
  element.classList.remove('hover');
});

これらの例のように、classList は様々な状況に応じて柔軟にクラスを操作することができます。

classList をマスターすることで、JavaScript でより洗練された、かつ動的な Web ページを作成することができます。ぜひ、今回紹介した内容を参考に、積極的に活用してみてください。

classList 以外の方法で複数のクラスを操作する方法

className プロパティ:

これは、HTML要素のクラス属性を直接操作する方法です。カンマ区切りで複数のクラス名を指定することで、一度に複数のクラスを追加・削除できます。

const element = document.getElementById('myElement');

// クラスを追加
element.className = 'class1 class2 class3';

// 特定のクラスを削除
element.className = element.className.replace('class1', '');

// すべてのクラスを削除
element.className = '';

利点:

シンプルで分かりやすい

classList に比べてコードが冗長になる
スペースを含むクラス名が扱いにくい

jQuery ライブラリ:

jQuery を利用すると、addClass()、removeClass() などのメソッドを使って、簡単にクラスを操作できます。

$(document).ready(function() {
  $('#myElement').addClass('class1 class2 class3');

  // 特定のクラスを削除
  $('#myElement').removeClass('class1');

  // すべてのクラスを削除
  $('#myElement').removeClass();
});