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

2021/12/09

jQuery

t f B! P L


今回は指定した要素にクラス(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が効いていない状態となりました。

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

カテゴリー別に記事を探す

このブログを検索

お問い合わせ

名前

メール *

メッセージ *

QooQ