【jQuery-5】.addClass と removeClass を使って表示を変える【超初心者向き】

今回は指定した要素にクラス（class）を追加する .addClass

そして、クラスを削除する .removeClass を解説します。

地味なメソッドですが、表示を変える際に必要になるので使用機会は意外と多いでしょう。

そもそもクラス（class）ってなんだ？という人は以下をご覧ください。

【HTML】class と id の違いについて

【.addClass】で指定したセレクタにクラスを追加する

See the Pen add_remove by taichi (@taichi_na) on CodePen.

クラスが指定されていない<p>要素がありますね。

この要素に対して jQuery でクラスを追加してみましょう。

<p> に対して class="text" を追加します。

$("p").addClass("text");

.addClass というメソッドを使うと引数で指定したクラスが追加されます。

上の例ではあらかじめCSSに記述されている .text が有効になったので文字の色が変わったということです。

【.removeClass】で指定したセレクタのクラスを削除する

See the Pen removeClass by taichi (@taichi_na) on CodePen.

今度は逆に、すでに指定されているクラスを削除してみましょう。

上の例では <p class="text"> となっています。このクラスを削除するのが以下のスクリプトになります。

$("p").removeClass("text");

ここで気を付けてほしいのは、 .text と記述する必要はないということです。

class で指定したセレクタはCSSで記述する際は . を付けるのがルールとなっていますが、今回のスクリプトではあくまで class="この部分" の記述を削除するのでそのまま書いてOKということです。

text クラスが削除されたことによって、<p>にはCSSが効いていない状態となりました。

なので文字の色が黒に戻ったということです。