【jQuery】classの追加と削除を行う方法

Web開発の世界において、動的なコンテンツとインタラクティブな要素はサイトの魅力を高める重要な要素となっています。jQueryは、このような動的な振る舞いを実装するのに役立つ強力なツールです。この記事では、jQueryを使用してHTML要素のクラスを追加、削除、切り替える方法を学びます。

クラスの追加: .addClass()
1. 基本的な使用法
2. 複数のクラスの追加
クラスの削除 .removeClass()
クラスの切り替え .toggleClass()
サンプルボタンクリックでテキストボックスのスタイルを変更する
まとめ

クラスの追加: .addClass()

基本的な使用法

$('#elementId').addClass('newClass');

このコードでは、IDが “elementId” の要素に “newClass” というクラスを追加します。

複数のクラスの追加

クラスを複数追加したい場合は、スペースで区切って指定します。

$('#elementId').addClass('class1 class2 class3');

クラスの削除 .removeClass()

$('#elementId').removeClass('existingClass');

この方法で、指定した要素から “existingClass” というクラスを削除できます。

クラスの切り替え .toggleClass()

このメソッドは、要素が指定したクラスを持っている場合はそのクラスを削除し、持っていない場合は追加します。

$('#elementId').toggleClass('toggleClass');

サンプルボタンクリックでテキストボックスのスタイルを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery クラス操作サンプル</title>
    <style>
        .highlight {
            border: 2px solid red;
            background-color: #ffe6e6;
        }
    </style>
</head>
<body>
    <input type="text" id="sampleTextbox" placeholder="ここにテキストを入力">
    <button id="toggleStyleButton">スタイル変更</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#toggleStyleButton').click(function(){
                $('#sampleTextbox').toggleClass('highlight');
            });
        });
    </script>
</body>
</html>

上記のサンプルでは、toggleStyleButton ボタンをクリックすると、sampleTextbox テキストボックスのスタイルが変更されます。.highlight クラスを使用して、テキストボックスの境界線と背景色を変更しています。ボタンをクリックするたびに、.highlight クラスがテキストボックスに追加・削除される動作を確認できます。

まとめ

jQueryを使用すると、クラスの追加や削除など、DOM要素の動的な操作が非常に簡単になります。この記事で学んだ技術を活用して、さらにインタラクティブなWebページを作成しましょう。