jQueryでクラス属性にクラスを追加・削除する方法

HTMLの要素に対し、動的にクラスを追加もしくは削除をする方法です。

スタイルを直接追加しても同じだけど、追加するスタイルが予め決まっていて、複数ある場合にはスタイルシートを定義しておいてそのクラスを追加したり削除したりすればコードもすっきりします。

たとえば以下のようなHTMLがあります。

このHTML要素のスタイルをボタンで切り替えたいとします。

適用されるスタイルは、文字の色を赤にし、文字を大きくして、文字を太字にするものです。

上記のスタイルを追加すると赤くて大きくて太い文字になるということです。

クラスを追加する

idname というIDを持つ要素に、textstyle というクラスを追加します。

デモページのボタンAの動きです。

複数のクラスを追加する場合は以下のように書きます。

クラスを削除する

idname というIDを持つ要素の textstyle というクラスを削除します。

デモページのボタンBの動きです。

複数のクラスを削除する場合は以下のように書きます。

指定したクラスを持っているか判定する

idname というIDを持つ要素が textstyle というクラスを持っているかどうかを判定します。

持っていれば true で、持っていなければ false が返ってきます。

例えば上のコードのように書けば、idname というIDを持つ要素が textstyle というクラスを持っていれば textstyle クラスを削除し、持っていなければ追加するということが出来ます。

デモページのボタンCの動きです。

クラスの有り無し切り替え

「指定したクラスを持っているか判定する」でのサンプルコードですが、if文を使ってごたごた書かなくても1行でさっくり書くことが出来ます。

toggleClass(“クラス名”) はクラスを持っていれば削除し、無ければ追加してくれます。

デモページのボタンDの動きです。

まとめ

$(セレクター).addClass(クラス名); でクラスを追加する。

$(セレクター).removeClass(クラス名); でクラスを削除する。

$(セレクター).hasClass(クラス名); でクラスを持っているか判定する。

$(セレクター).toggleClass(クラス名); でクラスのオンオフを切り替える。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA