JavaScriptでクラスのtoggleを実装する方法を解説!

ボタンをクリックするたびに特定要素の状態を切り替えることをtoggle(トグル)と言います。WEB制作やフロントエンド開発などでよく見かける機能の1つです。JavaScriptでクラスのtoggleを実装する方法を解説しています。

コンテンツ [表示]

  1. 1toggle(トグル)とは?
  2. 2JavaScriptでクラスのtoggleを実装する方法
  3. 2.1対象となる要素を表示
  4. 2.2クラスのtoggle(トグル)
  5. 3まとめ

toggle(トグル)とは?

toggle(トグル)とは英語で留め釘やダッフルコートなどのボタンという意味がありますが、プログラミングなどのITの分野ではONからOFFの状態に切り替えたり、OFFからONの状態に切り替える機能を持つtoggle(トグル)ボタンのことを意味します。

Photo byjamesmarkosborne

JavaScriptでクラスのtoggleを実装する方法

JavaScriptのtoggleメソッドを使うことで特定の要素にクラス名の付け外しを行い、状態を変化させていきます。それでは、サンプルコードを見ていきましょう。

対象となる要素を表示

まずはHTML/CSSでクラスのtoggle対象をコーディングしていきます。

index.html

<div id="target">
  ここをクリック
</div><!-- #target -->

index.css

/* ターゲット */
#target{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  user-select: none;
  background-color: red;
  transition: border-radius 0.5s;
}

#target.radius{
  border-radius: 50px;
}

今回、id属性がtargetであるdivタグをクリックすることでその要素自身の角を丸めるように変化するclass属性radiusをスタイルしています。

JavaScritpでクリックするたびに、このradiusクラスを付け外しするようにしていきます。

クラスのtoggle(トグル)

機能を実装しているJavaScript側のコードを見ていきましょう。

index.js

// targetクリックイベント
const target = document.getElementById('target');

target.addEventListener('click', function(){
  this.classList.toggle('radius');
});

まずid属性がtargetであるHTML要素をgetElementByIdメソッドで取得し、定数targetに代入しています。

その要素に対してaddEventListenerでクリックイベントを設定し、要素がクリックされるたびに中の処理を実行します。中の処理がクラスの付け外し(toggle)部分になります。

あわせて読みたい
JavaScriptで押されたボタンのid名を取得する方法!のイメージ
JavaScriptで押されたボタンのid名を取得する方法!
WEB制作やフロントエンド開発において、JavaScriptでDOM操作を行う技術は必須と言えます。DOM操作を行う際にHTML要素にid属性を設定し、JavaScriptでその要素を取得する方法がよく用いられる手法の1つです。その方法について解説しています。

クリックされた要素に対してclassListプロパティを指定することで該当要素のclass属性の情報を読み取ることができます。

classListプロパティで読み取った情報を元にtoggleメソッドの引数に指定したクラス名radiusが含まれていれば削除し、含まれていなければ追加されます。

あわせて読みたい
JavaScriptのclassListでクラスの追加・削除・判定方法!のイメージ
JavaScriptのclassListでクラスの追加・削除・判定方法!
JavaScriptのclassListでは該当要素のクラス名の取得・追加・更新・削除を行うことが出来ます。classListの使い方についてサンプルコード付きで解説します。

まとめ

JavaScriptでクラスのtoggle(トグル)を実装する方法を紹介しました。他のcontainsメソッド、addメソッド、removeメソッドに加えてif文で同じ処理を実装することは可能ではありますが、toggleメソッドを使用することでかなり短い記述でクラスの付け外しを実装することができます。

ぜひ、サンプルコードを参考にして自分なりにカスタマイズし表現の幅を増やせるようにしてください。

GeekHive採用サイト

関連記事