【JavaScript】要素にクラスを追加するならadd()!

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

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

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

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

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

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




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

JavaScriptで要素にクラスを追加する方法として、add()があります。

add()とは、要素に指定したクラスを追加するメソッドになります。

クラスを追加することからボタンを押した時や要素が作成されたなど、何かしらのイベントが起きた際に使用することができます。

そして、add()は基本単一のクラスを追加しますが、複数のクラスを一気に追加することも可能です。

また、ボタンを押してクラスを追加する静的処理だけでなく、イベント発生後に連鎖してクラスを追加する動的処理も行うこともできます。

クラスを動的に追加したいケースは多々あるかと思いますので、「このタイミングでクラスを追加したい!」と思った場合はadd()を使用しましょう。

今回はJavaScriptのadd()でクラスを追加する方法について解説していきます。

この記事はこんな方におすすめ
  • 静的にHTML要素へクラスを付与したい場合
  • 動的にHTML要素へクラスを付与したい場合

add()とは

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

指定した要素のクラスプロパティの末尾に追加されるようになります。

add()の書き方

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

要素の後ろにclassList.add()と追記することで使用することができます。

また、add()はclassListで準備されているメソッドであるため、add()の前に「classList」を追記しないとエラーになります。

add()の引数

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

  1. クラス名(必須):
    要素に追加するクラス名を指定する

add()は必須な引数として「クラス名」を指定します。

add()の返り値

add()の返り値はありません。

add()でクラスの追加を行うサンプルコード

add()でクラスの追加を行うサンプルコードをご紹介します。

ここでは、下記の2つのケースでadd()を使用します。

  1. 別名のクラスを追加する場合
  2. 重複するクラスを追加する場合

別名のクラスを追加する場合

別名のクラスを追加する場合にadd()を使用すると、指定した要素にクラスが追加されます。

● index.htm

● style.css

● main.js

実行結果

add()で別名のクラスの追加を行った結果

実行結果(ソースコード)

add()で別名のクラスの追加を行った結果のソースコード

add()によってクラスの追加を行っています。

そのため、「追加1」ボタンをクリックすると、「two-times」クラスが追加され、「追加2」ボタンをクリックすると「three-times」クラスが追加されています。

重複するクラスを追加する場合

重複するクラスを追加する場合にadd()を使用すると、重複したクラスは無視されるようになります。

● index.html

● style.css

● main.js

実行結果

add()で重複するクラスの追加を行った結果

実行結果(ソースコード)

add()で重複するクラスの追加を行った結果のソースコード

add()によってクラスの追加を行っています。

既に存在してるクラスを追加しようとしているため、処理は行われますが追加は行われていません。

複数のクラス名を一度に追加する場合

add()で複数のクラス名を一度に追加するには…(スプレッド演算子)を使用します。

…(スプレッド演算子)とは、配列やオブジェクトなどの要素を展開して個別の要素として扱うことができる演算子になります。

そのため、追加したいクラス名の配列をadd()の引数として指定し、スプレッド演算子を使用することで複数のクラス名を一度に追加することができます。

● index.htm

● style.css

● main.js

実行結果

add()で複数のクラス名を一度に追加した結果

実行結果(ソースコード)

add()で複数のクラス名を一度に追加した結果のソースコード

add()によって複数のクラス名を一度に追加しています。

そのため、「two-times」クラスによって要素と文字の大大きさが2倍、「red」クラスによって枠線と文字の色が赤色になって表示されています。

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

add()を使用した実際のケースを下記の3ケースでご紹介します。

  1. HTML要素に新しいクラスを追加する
  2. イベント処理中にクラスを追加する
  3. 繰り返し処理内で動的にクラスを追加する

HTML要素に新しいクラスを追加する

add()を使用することでHTML要素に新しいクラスを追加することができます。

例えば、ページをロードした瞬間にクラスを付与するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

add()でHTML要素に新しいクラスを追加した結果

add()を使用してHTML要素に新しいクラスを追加しています。

そのため、ページをロードするとクラスが付与されたHTML要素が表示されています。

イベント処理中にクラスを追加する

add()を使用することで、イベント処理中にクラスを追加することができます。

例えば、スクロールすると要素が連鎖して表示されるコードを作成します。

● index.html

● style.css

● main.js

実行結果

add()でイベント処理中にクラスを追加した結果

add()を使用してイベント処理中にクラスを追加しています。

そのため、ボタンを押すと指定の箇所までスクロールしてHTML要素が表示されています。

繰り返し処理内で動的にクラスを追加する

add()を使用することで繰り返し処理内で動的にクラスを追加することができます。

例えば、テーブルの奇数列と偶数列によって背景色を変えるコードを作成します。

● index.html

● style.css

● main.js

実行結果

add()を使用して繰り返し処理内で動的にクラスを追加した結果

add()を使用して繰り返し処理内で動的にクラスを追加しています。

そのため、配列内のHTML要素をテーブル要素として表示し、奇数列の場合と偶数列の場合に背景色が変更されています。

jQueryを使用してクラスの追加を行う場合

jQueryを使用してクラスの追加を行う場合はaddClass()を使用します。

addClass()とは要素にクラスを追加するjQueryのメソッドとなります。

そのため、addClass()を使用することでadd()のようにクラスを追加することができます。

● index.html

● style.css

● main.js

実行結果

jQueryのaddClass()でクラスの追加を行った結果

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

そのため、「追加1」をクリックする要素や文字の大きさが2倍に変化し、「要素2」をクリックすると背景色が青色に変化して表示されます。

classListで使用できるメソッドの一覧

classListにはadd()以外にも使用できるメソッドが存在します。

そのため、ここではclassListで使用できるメソッドの一覧について一部ですがご紹介します。

もし、classListで使用できるメソッドについて全て知りたい場合は下記の記事をご参考ください。

要素のクラスを削除する: remove()

remove()とは要素に付与されているクラスを取り除くメソッドとなります。

● index.html

● style.css

● main.js

実行結果

remove()で要素のクラスを削除した結果

remove()によって要素のクラスを削除しています。

そのため、「クラス削除1」のボタンを押すと「weight-size」クラスが削除され、「クラス削除2」のボタンを押すと「color」クラスが削除されています。

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

要素にクラスの有無を切り替える場合:toggle()

toggle()とは要素にクラスを付与したり剥奪したりするメソッドとなります。

● index.html

● style.css

● main.js

実行結果

toggle()で要素にクラスの有無を切り替えた結果

toggle()によって要素にクラスの有無を切り替えています。

そのため、「クラス切替」ボタンを押すと「color」クラスが付与され、もう一度押すと「color」クラスが剥奪されています。

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

クラスの存在確認を行う:contains()

contains()とは要素に指定したクラスが付与されているかどうかを確認するメソッドとなります。

そのため、付与されている場合はtrue、付与されていない場合はfalseを返すようになります。

● index.html

● style.css

● main.js

実行結果

contains()でクラスの存在確認を行った結果

contains()によってクラスの存在確認を行っています。

「color」クラスは既に付与されているため「クラス追加1」ボタンを押すと、処理は行われません。

しかし、「weight-size」クラスは付与されていないため「クラス追加2」ボタンを押すと、処理が行われます。

Sossy

contains()を使用することで、上記コードのようにクラスがすでに付与されているのかチェックすることができます。
そのため、add()の重複追加の処理を防止することができます。

まとめ

⚫︎ add()とは要素に指定したクラスを追加するclassListプロパティのメソッドである。

⚫︎ add()を使用するには下記の引数を指定する。
・クラス名(必須)

⚫︎ 別名のクラスを追加する場合にadd()を使用すると、要素に指定したクラスが追加される

⚫︎ 重複するクラスを追加する場合にadd()を使用すると、クラスの追加は行われない

⚫︎ add()で複数のクラス名を一度に追加するには「…(スプレッド演算子)」を使用する

⚫︎ jQueryのaddClass()を使用することでもクラスの追加を行うことができる。

⚫︎ classListプロパティにはadd()以外にも下記のメソッドを使用できる。
・remove()
(指定したクラスを取り除くメソッド)
・cotains()
(指定したクラスが付与されえているかどうか確認するメソッド)
・toggle()
(指定したクラスを付与したり剥奪したりするメソッド)