jQueryでclassを追加・削除する方法【これさえ覚えればOK】

2022年3月9日
jQuery
入門

jQuery

みなさんこんにちは！

今回の記事は、

・jQueryでclass属性を追加するにはどうしたらいいの？
・jQueryでclass属性を削除するにはどうしたらいいの？
・jQueryでclass属性を切り替える方法が知りたい！

というお悩みを解決する記事になっています。

この記事の内容

・jQueryでclass属性を追加する方法【addClass()メソッドを使います】
・jQueryでclass属性を削除する方法【removeClass()メソッドを使います】
・jQueryでclass属性を切り替える方法【toggleClass()メソッドを使います】

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 jQueryでclassを追加する方法：addClass()
- 1.1 addClass()メソッドで複数のclassを追加する方法
2 jQueryでclassを削除する方法：removeClass()
- 2.1 removeClass()メソッドを使って複数のclassを削除する方法
3 jQueryでclassの追加・削除を繰り返す方法：toggleClass()
4 最後に

jQueryでclassを追加する方法：addClass()

jQueryでclassを追加するには、addClass()メソッドを使用します。

使い方自体は非常にシンプルで、追加したいclassを引数に指定するだけで大丈夫です。

基本的な使い方

$(セレクタ).addClass(class名)

それでは早速、実際の実装例を見ながらその使い方を確認していきましょう。

実装コード

<p id="test-text1">テストテキスト</p>

<button onClick="clickButton1()">クラスを追加</button>

<script>
function clickButton1() {
  $("#test-text1").addClass("red-text")
}
</script>

<style>
.red-text {
  color: red;
}
</style>

動作確認用

テストテキスト

上記の例では、ボタンをクリックすると、上部のpタグに「red-tect」というclassが追加され、文字の色が赤色に変わるよう実装しています。

addClass()メソッドで複数のclassを追加する方法

addClass()メソッドを使うと、複数のclassを同時に追加することも可能です。

使い方はとても簡単で、追加したいclassを半角スペースで区切るだけで大丈夫です。

複数のclassを追加する方法

$(セレクタ).addClass(class名1 class名2 class名3)

実装コード

<p id="test-text2">テストテキスト</p>

<button onClick="clickButton2()">クラスを追加</button>

<script>
function clickButton2() {
  $("#test-text2").addClass("red-text bold-text")
}
</script>

<style>
.red-text {
  color: red;
}

.bold-text {
  font-weight: bold;
}
</style>

動作確認用

テストテキスト

このように、「red-text」「bold-text」いう二つのclassが追加されたことで、赤色でかつ太字の文字へと変わっていることがご確認いただけたかと思います。

jQueryでclassを削除する方法：removeClass()

jQueryでclassを削除するには、removeClass()メソッドを使います。

その使い方は、addClass()メソッドと同じでとても簡単で、今度は削除したいclassを引数に指定するだけで大丈夫です。

基本的な使い方

$(セレクタ).removeClass(class名)

それでは早速、実際の実装例を見ながらその使い方を確認していきましょう。

実装コード

<p class="red-text" id="test-text3" >テストテキスト</p>

<button onClick="clickButton3()">クラスを削除</button>

<script>
function clickButton3() {
  $("#test-text3").removeClass("red-text")
}
</script>

<style>
.red-text {
  color: red;
}
</style>

動作確認用

テストテキスト

上記の例では、ボタンをクリックすると、上部のpタグから「red-text」いうclassが削除され、文字の色が「赤→黒」へ変わるよう実装しています。

removeClass()メソッドを使って複数のclassを削除する方法

addClass()メソッド同様、removeClass()メソッドでも複数のclassを同時に削除することができます。

複数のclassを削除する方法

$(セレクタ).removeClass(class名1 class名2 class名3)

実装コード

<p class="red-text bold-text" id="test-text4" >テストテキスト</p>

<button onClick="clickButton4()">クラスを削除</button>

<script>
function clickButton4() {
  $("#test-text4").removeClass("red-text bold-text")
}
</script>

<style>
.red-text {
  color: red;
}

.bold-text {
  font-weight: bold;
}
</style>

動作確認用

テストテキスト

このように、「red-text」「bold-text」の二つのclassが削除されたことで、「赤色でかつ太字の文字」が「黒色でかつ細字の文字」へと変わっていることがご確認いただけたかと思います。

jQueryでclassの追加・削除を繰り返す方法：toggleClass()

jQueryには、classの追加・削除を繰り返すtoggleClass()という便利なメソッドも用意されています。

このtoggleClass()メソッドを使うと、指定したclassが存在する場合にはそのclassを削除し、存在しない場合にはそのclassを追加してくれます。

基本的な使い方はaddClass()やremoveClass()と同じで、追加・削除したいclassを引数に指定するだけで大丈夫です。

基本的な使い方

$(セレクタ).toggleClass(class名)

実装コード

<p id="test-text5">テストテキスト</p>

<button onClick="clickButton3()">クラスを追加or削除</button>

<script>
function clickButton3() {
  $("#test-text5").toggleClass("red-text")
}
</script>

<style>
.red-text {
  color: red;
}
</style>

動作確認用

テストテキスト

上記のボタンを押していただくと、テキストの色が「黒→赤」へ、そしてまた「赤→黒」へ戻っていくのがご確認頂けたかと思います。

このtoggleClass()メソッドを知らないと、「if文を使って『classがある場合とない場合』で条件分岐を作って処理する」ということになってしまいがちですので、ぜひこの機会に覚えておいてくださいね。

お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？

レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】

MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲