.net column
.NET開発者のためのブログメディア

Webサイト

jQueryでのaddClassメソッドの使い方を紹介!複数classを追加する方法とは?

2021年03月22日

SE
addClassメソッドとはどういったメソッドでしょうか?

PM
任意の要素にclass属性を追加できるメソッドです。

jQueryでのaddClassメソッドの使い方とは?


今回は、jQueryでのaddClassメソッドの使い方について説明します。

addClassメソッドを使用すると、classを追加することができます。addClassメソッドの基本的な使い方から、複数classを追加する方法について紹介します。

また、関連メソッドとして、removeClassメソッドやtoggleClassメソッドの使い方についても紹介します。removeClassメソッドは、指定クラスを削除できます。toggleClassメソッドは、指定クラスの追加・削除を切替えます。

jQueryでのaddClassメソッドの使い方に興味のある方はぜひご覧ください。

基本的な使い方

jQueryのaddClassメソッドの基本的な使い方を紹介します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_addclass1
by kskumd (@kskumd)
on CodePen.


classが追加され、追加されたclassの文字色が赤色になっていることが分かります。

class指定で追加

class指定でaddClassすることができます。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_addclass2
by kskumd (@kskumd)
on CodePen.


class指定でclassが追加され、追加されたclassの文字色が赤色になっていることが分かります。

複数classの追加

addClassメソッドでは、スペース区切りでclassを指定することで複数classを追加できます。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_addclass3
by kskumd (@kskumd)
on CodePen.


スペース区切りでclassを指定することで複数classを追加し、文字色・文字サイズ・フォントが変更されていることが分かります。

removeClass

addClassメソッドとは逆に、classを削除できるremoveClassメソッドを紹介します。

HTMLを以下に記載します。

CSSは以下のように記述します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_addclass4
by kskumd (@kskumd)
on CodePen.


ボタンをクリックするとclassが削除され、文字色が黒に戻ることが分かります。

toggleClass

classの追加・削除を繰り返す、toggleClassメソッドを紹介します。

HTMLを以下に記載します。

CSSは以下のように記述します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_addclass5
by kskumd (@kskumd)
on CodePen.


ボタンをクリックするたびに、classの追加・削除が切り替わり、それに合わせて文字色が切り替わることが分かります。

SE
追加や削除の他に色しても可能なメソッドなんですね。

PM
他にも複数classを追加できます。応用編ですがアニメーションお作成もできますのでぜひマスターしてください。

まとめ

いかがでしたでしょうか。jQueryのaddClassメソッドを使用すると、classを追加することができます。

addClassメソッドの基本的な使い方から、複数classを追加する方法や関連メソッドとして、removeClassメソッドやtoggleClassメソッドの使い方についても紹介しました。

ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs