• HOME > 
  • JavaScript > 
  • JSのclassList.toggleでクラスの付け外しを行...

JSのclassList.toggleでクラスの付け外しを行う

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

classList.toggleとは?

まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「classList.remove()」というように記述してクラスの付与や削除といった操作を行いたいときに使います。

「classList.toggle()」は要素が特定のクラスを持っているかどうかの判定をした上で、持っていなければそのクラスを付与、持っていればそのクラスを削除する処理を行います。

「contains」「add」「remove」を組み合わせて作るような処理が「toggle」なら単体で実装できます。

classList.toggle()の使い方

classList.toggle()は下記のように引数に付け外しを行いたいクラスを記述して使用します。

classList.toggle()の使い方

ここでは例として、ボタンをクリックするたびに要素の背景色が切り替わる処理を作ってみたいと思います。

ボタンをクリックするたびに要素の背景色が切り替わる処理

あらかじめCSSでクラスがある時とない時をセレクターにしたスタイルを用意しておきます。

ボタンに記述したonclick属性で、クリックされたらtoggleを使ったJSの処理を呼び出します。

HTML

<div id="test">toggle</div>
<button onclick="changeBg()">切り替え</button>

CSS

#test{
    background:#000033;
    color:#fff;
}
#test.active{
    background:#bf0000;
}    

続いてJavaScriptでtoggleでクラスの付け外しを行う処理を作成します。

toggleを用いれば通常クラスの付与や削除に使う「add」「remove」は不要です。要素がクリックするたびに「active」というクラスを持っているか判定し、持っていない場合は「active」を付与、持っている場合は「active」を削除します。

JavaScript

function changeBg(){
    var test = document.getElementById("test");
    test.classList.toggle("active");
}           

クラスの有無によってより複雑な処理を作りたい場合は、同じくclassListに用意されている「contains()」メソッドを使います。

「classList.contains」は要素が特定のクラスを含んでいるか調らべ「true」か「false」を返すので、戻り値で条件分岐を作ることができます。

「classList.contains()」についてはこちらのページにまとめています。

まとめ

以上が、JavaScriptのclassList.toggleでクラスの付け外しを行う方法です。

addやremove、containsと比べると使用する場面は限定的ですが、クリックに応じて交互にスタイルを切り替えるという機能は割とよく求められるので、それを簡単に記述できるというのは非常に助かりますね。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。