【JavaScript】toggle()で要素のクラスの有無を切り替える!

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

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

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

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

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

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




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

JavaScriptで要素にクラスを付与したり削除したりする方法として、toggle()があります。

toggle()とは、クラスの有無の切り替えを行うメソッドになります。

クラスの有無の切り替えることから、「Webサイトで表示されている要素のONとOFFを切り替える」際に使用することができます。

また、ボタンを押して切り替えを行う静的処理だけでなく、条件に合わせてクラスの有無を切り替える動的処理も行うこともできます。

クラスの有無を切り替えるケースは多々あるかと思いますので、もし要素のONとOFFを切り替えたいと思った場合はtoggle()を使用しましょう。

今回はJavaScriptのtoggle()でクラスの有無の切り替えを行う方法について解説していきます。

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

toggle()とは

toggle()とは指定した要素にクラスの追加と削除の切り替えを行うことができるメソッドとなります。

Sossy

そもそもtoggle(トグル)とは、OFFとONを相互に切り替える機能を意味します。

toggle()の書き方

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

要素の後ろにclassList.toggle()と追記し、必須の引数を1つ指定することで使用することができます。

また、追加で任意の引数を1つ指定することができ、合計2つの引数を指定することができます。

toggle()の引数

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

  1. クラス名(必須):
    要素に付与、剥奪するクラス名を指定する
  2. 強制フラグ(任意):
    クラス名を付与したままにするか剥奪したままにするかを真偽値で指定する

toggle()は必須な引数として「クラス名」を指定することができます。

また、任意な引数として「強制フラグ」を指定することができます。

toggle()の返り値

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

toggle()でクラスの有無の切り替えを行うサンプルコード

toggle()でクラスの有無の切り替えを行うサンプルコードをご紹介します。

存在するクラス名を指定する場合

存在するクラス名を指定してtoggle()を使用すると、クラスの有無の切り替えを行うようになります。

クラスの有無の切り替えを行うため、要素のスタイルも変化します。

● index.html

● style.css

● main.js

実行結果

toggle()で存在するクラス名を指定する場合にクラスの有無の切り替えを行った結果

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

そのため、要素をクリックすると赤くなり、もう一度クリックすると元に戻ります。

存在しないクラス名を指定する場合

存在しないクラス名を指定してtoggle()を使用すると、こちらもクラスの有無の切り替えを行うようになります。

しかし、存在しないクラスため、クラスの有無の切り替えだけがただただ行われるようになります。

● index.html

● style.css

● main.js

実行結果

toggle()で存在しないクラス名を指定する場合にクラスの有無の切り替えを行った結果

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

今回は存在しないクラスを指定しているため、要素をクリックしても変化は起きません。

また、ソースコードを見ると、要素に変化はありませんがクラスの有無が切り替わっています。

toggle()でクラスの有無を切り替えたままにする場合

toggle()でクラスの有無を切り替えたままにするには、引き数に「強制フラグ」を指定します。

「強制フラグ」を指定することで、クラスの有無を強制的に設定することができます。

強制フラグがtrueの場合、クラスを付与して剥奪は行われませんが、falseの場合、クラスを剥奪して追加は行わなくなります。

また、強制フラグに条件式を指定することで強制的なクラス有無を動的に設定することもできます。

● index.html

● style.css

● main.js

実行結果

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

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

今回は、強制フラグに「true」と「要素の幅が100pxである場合」という条件式を設定しています。

そのため、「クリック1」を押すと要素の色が変化したままになります。

そして、「クリック2」を先にクリックすると何も起きませんが、「クリック1」の後に押すと要素の色が変化したままになります。

toggle()でクラスの有無の切り替える目的の一覧

toggle()はクラスの有無を切り替えるメソッドだとはわかりましたが、どのような目的で使用するのかイメージがつかないかと思います。

そのため、ここではtoggle()でクラスの有無の切り替える目的を下記の4つでご紹介します。

  1. 表示と非表示を切り替える場合
  2. クラスの付与と剥奪を切り替える場合
  3. スタイルを切り替える場合
  4. ステータスを切り替える場合

表示と非表示を切り替える場合

toggle()を使用することで要素の表示と非表示を切り替えることができます。

● index.html

● style.css

● main.js

実行結果

toggle()で要素の表示と非表示を切り替えた結果

toggle()によって表示と非表示の切り替えを行っています。

そのため、ボタンを押すと要素が画面から消え、もう一度クリックすると画面に表示されます。

クラスの付与と剥奪を切り替える場合

toggle()を使用することでクラスの付与と剥奪を切り替えることができます。

● index.html

● style.css

● main.js

実行結果

toggle()で要素のクラスの付与と剥奪を切り替えた結果

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

toggle()で要素のクラスの付与と剥奪を切り替えた時のソースコード

toggle()によって>クラスの付与と剥奪を切り替えを行っています。

そのため、ボタンをクリックすると「toggle」クラスが付与され、もう一度クリックすると「toggle」クラスが剥奪されています。

スタイルを切り替える場合

toggle()を使用することで、要素のスタイルを切り替えることができます。

● index.html

● style.css

● main.js

実行結果

toggle()で要素のスタイルを切り替えた結果

toggle()によってスタイルを切り替えを行っています。

そのため、ボタンをクリックすると要素の色が赤色から青色に変化し、要素と文字のサイズが2倍になっています。

ステータスを切り替える場合

toggle()を使用することで、要素のステータスを切り替えることができます。

● index.html

● style.css

● main.js

実行結果

toggle()で要素のステータスを切り替えた結果

toggle()によって要素のステータスを切り替えを行っています。

そのため、ボタンをクリックすると「NO」から「OK」に変化しています。

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

toggle()を使用した実際のケースをご紹介します。

要素を自動で変更する

toggle()を使用することで要素を自動で変更することができます。

例えば、秒数間隔で色が点滅するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

toggle()を使用して要素の自動変更を作成した結果

setInterval()内でtoggle()を使用することで、秒数間隔で要素を自動で変更しています。

そのため、0.5秒の間隔で要素が赤色や青色に変化しています。

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

アコーディオン要素を作成する

toggle()を使用することで、アコーディオン要素を作成することができます。

例えば、Webサイトでよく見かける「+ボタン」を押すと、詳細の一覧が表示されるコードを作成します。

● index.html

● style.css

● main.js

実行結果

toggle()でアコーディオン要素を作成した結果

toggle()によってアコーディオン要素を作成しています。

そのため、+ボタンを押すと交通の詳細情報が表示されています。

スイッチの切り替え

toggle()を使用することでスイッチの切り替えを行うことができます。

例えば、スイッチを押すとONとOFFで切り替わるようコードを作成します。

● index.html

● style.css

● main.js

実行結果

toggle()でスイッチの切り替えを作成した結果

toggle()を使用することでスイッチの切り替えを行っています。

そのため、スイッチを押すと白色から青色に変化しています。

また、「ナイトモード」のスイッチを押すとダイヤログ画面が表示され、「はい」を押すと白色から青色に変化しています。

jQueryを使用してクラスの有無の切り替えを行う場合

jQueryを使用してクラスの有無の切り替えを行う場合はtoggleClass()を使用します。

toggleClass()とは要素のクラスを切り替えるjQueryのメソッドとなります。

そのため、toggleClass()を使用することでtoggle()のようにクラスの有無を切り替えることができます。

● index.html

● style.css

● main.js

実行結果

jQueryのtoggleClass()を使用してクラスの有無の切り替えを行った結果

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

そのため、ボタンをクリックすると赤色に変化し、もう一度クリックすると元に戻ります。

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

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

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

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

要素にクラスを追加する:add()

add()とは要素にクラスを付与するメソッドとなります。

要素に対して指定したクラスを追加することができます。

● index.html

● style.css

● main.js

実行結果

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

add()によって要素にクラスを追加しています。

そのため「クラス追加1」ボタンを押すと「weight-size」クラスが付与され、枠線と文字が太字に変化しています。

また「クラス追加2」ボタンを押すと「color」クラスが付与され、背景が赤色、文字が白色に変化しています。

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

要素のクラスを取り除く: remove()

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

こちらは要素から指定したクラスを取り除くことができます。

● index.html

● style.css

● main.js

実行結果

remove()で要素のクラスを取り除いた結果<

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

そのため「クラス追加1」ボタンを押すと「weight-size」クラスが取り除かれています。

また「クラス追加2」ボタンを押すと「color」クラスが取り除かれています。

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

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

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

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

● index.html

● style.css

● main.js

実行結果

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

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

そのため、「クラス追加1」ボタンを押して「クラス追加2」ボタンを押すとクラスが付与されます。

しかし、先に「クラス追加2」ボタンを押すと「weight-size」クラスの存在が確認できないことからアラートが表示されます。

まとめ

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

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

⚫︎ toggle()でクラスの有無を切り替えたままにするには、引き数に「強制フラグ」を指定する。
(条件式を直接指定しても可能)

⚫︎ toggle()は下記のような目的で使用される。
・表示と非表示を切り替える場合
・クラスの付与と剥奪を切り替える場合
・スタイルを切り替える場合
・ステータスを切り替える場合

⚫︎ jQueryのtoggleClass()を使用することでもクラスの有無の切り替えを行うことができる。

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

コメントを残す

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

CAPTCHA