JavaScriptのclassListプロパティを使用してクラスを切り替える方法

JavaScriptを使用して要素のクラスを切り替える方法は、開発者として学ぶことができる最も実用的なスキルの1つです。トグルは、メニューの表示と非表示、検索フィルターの追加と削除、ソーシャルメディアボタン（いいね、いいね）など、さまざまな目的で使用されます。

もちろん、コンテキストに応じて、切り替えは数行のコードよりも複雑である必要はありません。今日は、トグルするだけでなく、JavaScript全般を学ぶことから始める簡単な方法を学びます。

HTML構造

JavaScriptの機能に取り掛かる前に、いくつかのHTML要素を設定して、何かを操作できるようにします。ラッパー、ボタン、ボックスを作成しましょう。

HTMLドキュメントの本文タグ内に次の情報を入力します。

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

親のdiv要素（ラッパー）はそこにのみ存在するため、その子要素（ボックスとボタン）をCSSで中央に配置できます。これは表面的なものであり、これが機能するために必要ではありません。

注：CodePenなどのオンラインコードエディターを使用している場合は、このコードをHTMLタブウィンドウに追加できます。ボディタグなど、残りのHTMLを舞台裏で追加します。

CSSスタイル

親のdiv要素には.wrapperがあります 子要素（ボックスとボタン）を中央揃えにするいくつかのFlexboxプロパティを持つクラス。 Flexboxの方法と理由については説明しません。これは、別のチュートリアル用です。

ボタンとボックスは、化粧品の目的でいくつかの基本的なスタイルのクラスを取得します。

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

ここで注目すべき重要なことは、.bg-redです。 CSS background-colorを含むクラス 値が「＃AA2F18」（赤）のプロパティ。これは、ボタン要素をクリックしたときにボックス要素に切り替える（追加または削除する）クラスです。

JavaScriptイベント処理

JavaScriptで要素の操作を開始する前に、まず2つの要素（ボックスとボタン）への参照を保存する必要があります。これを行うには、buttonという2つの変数を宣言します。 、およびbox 次に、2つの要素をそれぞれの変数に割り当てます。

参照を保存するボックスとボタンの要素を選択するには、すばらしいquerySelectorを使用します。 要素のクラスを取得するメソッド：

let button = document.querySelector(".button");
let box = document.querySelector(".box");

各ターゲット要素への参照ができたので、それらのプロパティとメソッドにアクセスすることで、それらをDOM操作できます。この場合、イベントリスナーを使用します クリックイベントをリッスンします ボタン要素に。クリックが検出されたら、関数を実行します 背景色を切り替え実行します ボックス要素に。

そのために、addEventListener()を添付します ボタン要素へのメソッド（変数参照を介して）。このイベントリスナーメソッド内に、2つのパラメータ値を追加しています：'click' （イベントタイプ）、およびfunction() 。この例では、匿名（名前なし）関数を使用します。

次に、無名関数内で、JavaScriptclassListプロパティのtoggle()をアタッチします。 ボックス要素へのメソッド。トグルメソッドの仕事は、.bg-redを追加または削除することです。 クラス：

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

classListトグルメソッドは次のように機能します。指定されたクラスがターゲット要素にすでに存在する場合、そのクラスは削除されます。存在しない場合は追加されます。

終わったね！これで、プレーンJavaScriptを使用して指定された要素のクラスを切り替える方法をマスターしました。このチュートリアルのすべてのコードをCodePenに載せました。

このコードは、IE10以降のすべての最新ブラウザーと互換性があります。