JS・jQuery

jQueryのtoggleClassメソッドでクラスの付け外しをしてCSSを切り替える方法【jQuery】

最終更新日：2024-12-26

公開日：2024-12-17

ページ内に広告が含まれています。

jQueryのtoggleClassメソッドでクラスの付け外しをしてCSSを切り替える方法【jQuery】

jQueryでクラスを追加する際はaddClassメソッド、クラスを削除する際はremoveClassメソッドを使用しますが、toggleClassメソッドを使用するとその両方を要素の状態に合わせて行う事が出来ます。
今回は、このtoggleClassメソッドについて詳しく解説していきます。

公式サイトでも詳しい内容を見る事ができます。

toggleClassメソッドとは
toggleClassメソッドの基本的な使い方
要素の指定したクラスを付け外しする
要素のクラスを全て外して元に戻す
複数のクラスを付け外しする
条件文を使用してクラスを付け外しする
さいごに

toggleClassメソッドとは

toggleClassメソッドは、クラスを追加するaddClassメソッドと、クラスを削除するremoveClassメソッドの両方の特性を持つメソッドです。指定した要素にクラスが付いていればクラスを削除し、クラスが付いていなければクラスを追加します。

簡単に言うと、クラスのON・OFF(付け外し)が出来るメソッドです。

toggleClassメソッドの基本的な使い方

toggleClassメソッドの基本的な使い方は以下のようになります。

$('クラスの付け外しをしたい要素').toggleClass('クラス名');

上記のように記述する事で、クラスの付け外しが可能です。

要素の指定したクラスを付け外しする

まずは単純なクラスの付け外しです。
ボタンをクリックすると、テキストに指定したクラスがあればクラスを削除し、指定したクラスが無ければクラスを追加します。

<button>ボタン</button>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>

.bg_gray {
    background-color: #E4E4E4;
}

$('button').on('click',function(){
    $('p').toggleClass('bg_gray');
});

ボタンをクリックすると、テキスト部分に「bg_gray」という背景色がグレーになるクラスを付け外しします。
実際の動作は以下となります。

テキストテキストテキストテキストテキストテキストテキスト

ボタンをクリックする度にクラスの付け外しが行われますので背景色が変わります。

要素のクラスを全て外して元に戻す

以下のようにすると、ボタンをクリックすると要素に付いているクラスを外し、再度クリックするとクラスを元に戻す事ができます。

<button>ボタン</button>
<p class="bg_gray">テキストテキストテキストテキストテキストテキストテキスト</p>
<p class="bg_orange">テキストテキストテキストテキストテキストテキストテキスト</p>

.bg_gray {
    background-color: #E4E4E4;
}
.bg_orange{
    color: #FFF;
    background-color: #FFA500;
}

今回はCSSで2つのクラスを用意し、それぞれ違う背景色や文字色を指定しています。

$('button').on('click',function(){
    $('p').toggleClass();
});

先程までとは違い、toggleClassメソッドの引数にクラス名を指定していません。

テキストテキストテキストテキストテキストテキストテキスト

上記例のようにtoggleClassメソッドの引数にクラス名を指定しない事で、付いているクラスの付け戻しが出来るようになります。

複数のクラスを付け外しする

続いて、指定した複数のクラスを付け外しする方法です。

<button>ボタン</button>
<p class="bg_gray color_red border">テキストテキストテキストテキストテキストテキストテキスト</p>

pタグに「bg_gray」「color_red」「border」の3つのクラスを指定しています。

.bg_gray {
    padding: 10px;
    background-color: #E4E4E4;
}
.color_red {
    color: red;
}
.border {
    border: 2px solid #000;
}

ボタンをクリックする事で、「color_red」と「border」の2つのクラスを付け外しします。

$('button').on('click',function(){
    $('p').toggleClass('color_red border');
});

テキストテキストテキストテキストテキストテキストテキスト

クラス「bg_gray」は含めていないので背景色は変わらずグレーのままになります。
このように、複数の指定のクラスだけを付け外しする事も可能です。

条件文を使用してクラスを付け外しする

次は、条件文を使用してクラスを付け外しする方法です。
これまではボタンをクリックする事でクラスの付け外しをしてきましたが、条件文を使用して条件に合う場合にクラスを追加、合わない場合はクラスを削除という事も可能です。

まずは以下のコードをご覧ください。

<p>テキストテキストテキストテキストテキストテキストテキスト</p>

.bg_gray {
    background-color: #E4E4E4;
}

// 画面ロード時とリサイズ時に実行
$(window).on('load resize', function(){
    // 画面サイズが768px以下の場合はクラス「bg_gray」を追加、それ以外はクラス「bg_gray」を削除
    $('p').toggleClass('bg_gray', $(window).width() <= 768);
});

$(window).on(‘load resize’, function(){});で画面のロード時とリサイズ時に実行するように指定し、toggleClassメソッドの引数に、カンマ区切りで$(window).width() <= 768)と指定する事で画面幅768px以下の場合はクラス追加、それ以外ではクラス削除をしています。

テキストテキストテキストテキストテキストテキストテキスト

ウィンドウサイズを広げたり縮小したりして確認してみてください。
画面幅によってクラスが追加・削除されているのが分かるかと思います。