【jQuery】addClass()で対象の要素にクラスの追加を行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年08月31日に投稿されました。)

jQueryで要素にクラスを追加するにはaddClass()を使用します。

addClass()とは、指定した要素に新たなクラスを付与することができるメソッドになります。

基本的には引数にクラス名を指定して使用しますが、複数のクラスを一気にまとめて追加することもできます。

また、コールバック関数を指定することもできるので、条件で付与するクラスを変えたい場合にはとても便利です。

クラスを付与して動的に要素の状態を変えたりすることがありますので、もしjQueryで要素にクラスの追加を行いたい場合はaddClass()を使用するようにしましょう。

今回は、jQueryのaddClass()で対象の要素にクラスの追加を行う方法について紹介していきます。

この記事はこんな方におすすめ

要素にクラスを動的に追加したい場合

要素のスタイルを動的に変えたい場合

addClass()とは

addClass()とは、対象の要素に指定したクラスを付与することができるメソッドになります。

HTML要素のクラス属性に新しくクラス名が追加され、CSSでクラスが定義されているのであれば、そちらのプロパティも反映されるようになります。

addClass()の書き方

addClass()の書き方は下記のようになります。

セレクタの後ろにaddClass()と追記し、引数を1つ指定して使用できます。

また、addClass()は下記のように使用することもできます。

セレクタの後ろにaddClass()と追記し、引数を1つ指定することで使用できます。

addClass()の引数

addClass()の引数は下記のようになります。

  1. クラス名:(必須)
    付与するクラス名を指定する
  2. コールバック関数:(必須)
    付与するクラス名の処理を関数で指定する
    (追加したいクラス名が戻り値になるよう設定する)

addClass()は、必須な引数として「クラス名

また、違う書き方として必須な引数として「コールバック関数」」を指定することができます。

addClass()で対象の要素にクラスの追加を行うサンプルコード

addClass()で対象の要素にクラスの追加を行うサンプルコードをご紹介します。

ここでは、下記の3ケースでaddClass()を使用します。

  1. 付与されていないクラスを指定する場合
  2. 既に付与されているクラスを指定する場合
  3. 定義されていないクラスを指定する場合

付与されていないクラスを指定する場合

付与されていないクラスを指定してaddClass()を使用すると、要素にクラスを付与することができます。

● index.html

● style.css

● main.js

実行結果

addClass()に付与されていないクラスを指定してクラスの追加を行った結果

addClass()によって対象の要素にクラスの追加を行っています。

そのため、ボタンをクリックすると、「color」クラスが追加され、要素の色が変化しています。

既に付与されているクラスを指定する場合

既に付与されているクラスを指定してaddClass()を使用すると、>クラスが重複するため追加は行われません。

● index.html

● style.css

● main.js

実行結果

addClass()に付与されているクラスを指定してクラスの追加を行った結果

addClass()によって対象の要素にクラスの追加を行っています。

今回は、既に付与されている「color」クラスを再び追加しようとしているため、ボタンをクリックしても要素に変化はありません。

定義されていないクラスを指定する場合

定義されていないクラスを指定してaddClass()を使用すると、クラスが付与されます。

しかし、クラスが定義されていないため、クラス名がただただ付与される形になります。

● index.html

● style.css

● main.js

実行結果

addClass()に定義されていないクラスを指定してクラスの追加を行った結果

addClass()によって対象の要素にクラスの追加を行っています。

今回は、「colorYellow」クラスを追加しようとしていますが、定義されていないことからボタンをクリックしても要素に変化はありません。

しかし、コードを見ると、「colorYellow」クラスが付与されています。

addClass()で対象の要素に複数のクラスを一気に追加する場合

addClass()で対象の要素に複数のクラスを一気に追加するにはクラスを「半角空白」で区切って指定します。

複数のクラスが追加されるため、要素のクラス属性の値の後ろから追加されるようになります。

● index.html

● style.css

● main.js

実行結果

addClass()で要素に複数のクラスを一気に追加した結果

addClass()によって対象の要素に複数のクラスの追加を行っています。

そのため、クラス追加のボタンをクリックすると、「color」と「twoTimes」のクラスが追加され、要素の色と大きさが変化しています。

addClass()でコールバック関数を指定して対象の要素にクラスの追加を行うサンプルコード

addClass()で「コールバック関数を指定して対象の要素にクラスを追加するサンプルコードをご紹介します。

コールバック関数の引数を1つ指定する場合

コールバック関数の引数を1つ指定すると、「マッチした要素の番号を取得して処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

addClass()のコールバック関数に引数を1つ指定してクラスの追加を行った結果

addClass()でコールバック関数を設定して対象の要素にクラスの追加を行っています。

そのため、クラス追加ボタンをクリックすると、偶数番号と奇数番号で要素の色がそれぞれ変化しています。

コールバック関数の引数を2つ指定する場合

コールバック関数の引数を2つ指定すると、「現在で割り当てられているクラス名を取得して処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

addClass()のコールバック関数に引数を2つ指定してクラスの追加を行った結果

addClass()でコールバック関数を設定して対象の要素にクラスの追加を行っています。

そして、JavaScriptのincludes()を使用してclassNameに「unique」の文字列が含まれているか判断しています。

そのため、クラス追加ボタンをクリックすると、「unique」クラスが付く要素のみ色と大きさが変化しています。

もし、includes()について詳しく知りたい場合は下記の記事をご参考ください。

addClass()を使用した実際のケース

addClass()を使用した実際のケースについてご紹介します。

例えば、addClass()を使用してWebページを見ているとたまに表示される下から出てくる広告(アンカー広告)のコードを作成します。

アンカー広告のイメージ画像

● index.html

● style.css

● main.js

実行結果

addClass()を使用してWeb ページのアンカー広告を作成した結果

addClass()によって要素のクラスの追加を行い、アンカー広告を表示しています。

そのため、Webページを読み込んだ数秒後に下から広告の枠が表示されています。

対象の要素からクラスを取り除く場合

対象の要素からクラスを取り除く場合は、removeClass()を使用します。

removeClass()とは、要素から指定したクラスを削除することができるメソッドになります。

そのため、addClass()で追加されたクラスや既存で付与されているクラスを取り除くことができます。

● index.html

● style.css

● main.js

実行結果

removeClass()で要素からクラスを取り除いた結果

removeClass()によって要素からクラスを取り除いています。

そのため、「クラス削除」をクリックするとクラスが取り除かれ、要素の背景色がピンク色から白色になっています。

もし、removeClass()について詳しく知りたい場合は下記の記事をご参考ください。

JavaScriptで対象の要素にクラスの追加を行う場合

JavaScriptで対策の要素にクラスを追加するにはclassList.add()を使用します。

classList.add()とは、指定したクラスを追加することができるメソッドになります。

そのため、今回ご紹介しているaddClass()のJavaScriptバージョンになります。

● index.html

● style.css

● main.js

実行結果

classList.add()で要素にクラスを追加した結果

classList.add()で対象の要素にクラスの追加を行っています。

そのため、クラス追加ボタンをクリックすると要素にクラスが付与され、色が変化しています。

もし、classList.add()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ addClass()とは対象の要素にクラスの追加を行うメソッドである。

⚫︎ addClass()は下記の引数のどちらかを指定して使用する
・クラス名(必須)
・コールバック関数(必須)

⚫︎ 既に付与されているクラスを指定してaddClass()を使用すると、クラスの追加は行われない。

⚫︎ 定義されていないクラスを指定してaddClass()を使用すると、クラスの追加は行われるが変化はない。

⚫︎ addClass()で要素に複数のクラスを一気に追加するにはクラス名に半角空白を空けてクラスを指定する。

⚫︎ addClass()のコールバック関数に引数を1つ指定すると、マッチした要素の番号を取得して処理を行うことができる。

⚫︎ addClass()のコールバック関数に引数を2つ指定すると、現在で割り当てられているクラス名を取得して処理を行うことができる。

⚫︎ 対象の要素からクラスを取り除くにはremoveClass()を使用する。

⚫︎ JavaScriptで対象の要素にクラスを追加するにはclassList.add()を使用する。

コメントを残す

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

CAPTCHA