今回は指定した要素にクラス(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が効いていない状態となりました。
なので文字の色が黒に戻ったということです。