JavaScript - ボタンを押して表示を切り替える方法

ウェブページの見た目を切り替えよう

今回は、ウェブページに表示されるのコンテンツの表示 / 非表示や、ライト / ダークモードを切り替える方法を紹介します。ボタンをクリックするたびに要素のスタイルを交互に切り替える方法を学びましょう。

記事の後半では、ON / OFF ボタンや点滅するライトのサンプルプロジェクトも掲載しているので参考にしてください。

表示 / 非表示を切り替える方法

下にあるのは、ボタンを押すたびにコンテンツの表示 / 非表示が切り替わるサンプルプロジェクトです。ボタンをクリックして動きを試してみてください。

See the Pen Javascript - Show / Hide on Click by Pyxofy (@pyxofy) on CodePen.

ではこれから、表示 / 非表示を切り替える方法を最も簡単なコードで解説していきます。

HTML - 表示 / 非表示する要素を用意する

まずは HTML です。表示を切り替えるために使うのは <button> 要素です。ここでは、表示または非表示するコンテンツを <div> 要素で作ります。

<button>CLICK</button>
<div id="demo">表示・非表示する要素</div>

CSS - 切り替えたいクラスを用意する

次に CSS です。表示 / 非表示を切り替えるためには、CSS で切り替えたいクラスを用意しておく必要があります。切り替えたいのは、表示スタイルの display プロパティです。要素を非表示にするために display: none とし 、hidden というクラスを作りましょう。

.hidden {
  display: none;
}

ここまででウェブページにはボタンと <div> 要素が表示されています。続いて、JavaScript で表示 / 非表示を切り替えるようにプログラミングしていきます。

JavaScript - クラスを切り替える

表示 / 非表示を切り替えるボタンを JavaScript で操作できるようにするために、<button> 要素を取得して変数に格納しておきましょう。

const button = document.querySelector('button');

ボタンがクリックされたら toggleDisplay という関数を実行するように、イベントリスナーを設定します。関数 toggleDisplay は、このあと定義しますよ。

button.addEventListener('click', toggleDisplay);

関数や addEventListener() について、詳しくは以下の記事を参考にしてください。

ボタンがクリックされたときに実行する関数を、toggleDisplay という名前で定義していきましょう。toggle (トグル) は「切り替える」という意味です。

function toggleDisplay() {

}

表示を切り替えたいコンテンツである <div> 要素を取得して変数に格納します。

function toggleDisplay() {

  // 要素の取得
  const demo = document.querySelector('#demo');
}

クラスの追加 / 削除をする - classList.toggle()

要素のスタイルを交互に切り替えたいときに使うのが、classList の toggle() メソッドです。

構文：

要素.classList.toggle('クラス')

要素.classList.toggle() は、括弧 () に指定したクラスが要素に設定されていたらそのクラスを削除し、設定されていなかったら追加するという処理をします。今回切り替えたいのは、hidden クラスです。括弧 () の中に引用符 ' ' で囲んでクラス名を書きましょう。

function toggleDisplay() {
  const demo = document.querySelector('#demo');

  // hiddenクラスの追加または削除をする
  demo.classList.toggle('hidden');
}

ボタンがクリックされたときに、hidden クラスの追加または削除を行う関数ができました。hidden クラスが追加されると <div> 要素は非表示になり、hidden クラスが削除されると通常どおりに表示されます。

コンテンツの表示 / 非表示を切り替えるプログラムは以下のようになります。

HTML：

<button>CLICK</button>
<div id="demo">表示・非表示する要素</div>

CSS：

.hidden {
  display: none;
}

JavaScript：

const button = document.querySelector('button');
button.addEventListener('click', toggleDisplay);

function toggleDisplay() {
  const demo = document.querySelector('#demo');
  demo.classList.toggle('hidden');
}

今回はコンテンツが表示された状態から始めました。でも逆に、最初は非表示にしておいてボタンクリックで表示させたい場合もありますよね。そんなときは、あらかじめ HTML で hidden クラスを指定しておきましょう。

<!-- 最初は非表示 -->
<div id="demo" class="hidden">表示・非表示する要素</div>

ライト / ダークモードに切り替える方法

次に紹介するのは、ウェブページの表示をライト / ダークモードに切り替える方法です。下のサンプルプロジェクトで動きを試してみてください。

See the Pen Javascript - Light / Dark Mode by Pyxofy (@pyxofy) on CodePen.

ライト / ダークモードに切り替える方法は、先ほど解説した表示 / 非表示を切り替える方法と考え方は同じです。CSS で切り替えたいクラスを用意して、JavaScript でクラスの追加または削除を行います。

CSS：

.dark-mode{
  background-color: black;
  color: white;
}

JavaScript：

const button = document.querySelector('button');
button.addEventListener('click', toggleModes);

function toggleModes() {
  document.body.classList.toggle('dark-mode');
}

dark-mode クラスが追加されるとウェブページの表示が「背景は黒・文字は白」のダークモードになり、dark-mode クラスが削除されると通常モードの「背景は白・文字は黒」で表示されます。

JavaScript コードは、アロー関数を使って下のように書くこともできますよ。

const button = document.querySelector('button');
button.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

function キーワードを使った関数宣言をアロー関数に書き換える方法は、以下の記事で紹介しています。

toggle() を使ったサンプルプロジェクト

最後に、classList の toggle() メソッドを使ったサンプルプロジェクトを２つ紹介します。JavaScript コードはとてもシンプルなので参考にしてみてください。

ON / OFF ボタン

クリックするたびに ON と OFF が切り替わるボタンです。

See the Pen Javascript - ON / OFF Toggle Button by Pyxofy (@pyxofy) on CodePen.

HTML：

<button class="on">ON</button>

CSS でボタンの見た目を設定し、切り替えたいクラスを用意します。

• on クラスではじめのスタイルを設定します。
• off クラスは切り替えるスタイルです。切り替えるのは、ボタンの「文字の色 color」「背景色 background-color」「枠線の色 border」です。

CSS：

/* はじめに設定しておくクラス */
.on {
  width: 250px;
  height: 150px;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  border-radius: 70px;
  /*切り替えるプロパティ*/
  color: white;
  background-color: #0d7df5;
  border: 5px solid white;
}

/* 追加または削除するクラス */
.off {
  color: black;
  background-color: lightgray;
  border: 5px solid gray;
}

JavaScript でクラスの追加または削除を行い、ボタンの見た目を切り替えます。同時にボタンの文字も切り替えますよ。

• classList の toggle() メソッドで off クラスを追加 / 削除します。
• ボタンの文字 ON / OFF を切り替えるために使うのは if 文です。

JavaScript：

const onButton = document.querySelector('.on');
onButton.addEventListener('click', toggleBtn);

function toggleBtn() {
  // 色を切り替える
  onButton.classList.toggle('off');
  // 文字を切り替える
  if (onButton.innerHTML === 'ON') {
    onButton.innerHTML = 'OFF';
　}else{
  onButton.innerHTML = 'ON';
　}
}

if 文については以下の記事で解説しています。

点滅するライト

自動でついたり消えたりするライトです。

See the Pen Javascript - ON / OFF Toggle Light by Pyxofy (@pyxofy) on CodePen.

HTML：

<div class="light"></div>

CSS でライトの見た目を設定し、切り替えたいクラスを用意します。

• light クラスで設定するはじめの状態は、ライトが消えているスタイルです。
• on クラスは切り替えるスタイルです。切り替えるのは、「ライトの色 background-color」「ライト周辺の影 box-shadow」です。

CSS：

/* はじめに設定しておくクラス */
.light {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  transition: box-shadow 1s; /*スムーズに変更する*/
  /* 切り替えるプロパティ */
  background-color: black;
  box-shadow: 1px 1px 20px 10px gray;
}

/* 追加または削除するクラス */
.on {
  background-color: #ffff99;
  box-shadow: 1px 1px 100px 10px #ffffb3;
}

JavaScript でクラスの追加または削除を行い、ライトの見た目を切り替えます。自動的に切り替わるように、関数の呼び出しには setInterval() メソッドを使います。

• classList の toggle() メソッドで on クラスを追加 / 削除します。
• ライトの見た目を切り替える関数 toggleColor を setInterval() で 1.5 秒ごとに繰り返し呼び出すことで、ライトを点滅させます。

JavaScript：

const light = document.querySelector('.light');

function toggleColor() {
  // 色を切り替える
  light.classList.toggle('on');
}

// 1.5秒間隔で繰り返し呼び出す
setInterval(toggleColor, 1500);

アロー関数を使って、下のように書くこともできますよ。

const light = document.querySelector('.light');
setInterval(() => {
  light.classList.toggle('on');
}, 1500);

まとめ

今回は、コンテンツの表示 / 非表示やウェブページの表示をライト / ダークモードにするなど、要素のスタイルを交互に切り替える方法を紹介しました。

classList の toggle() メソッドを使うと、指定した要素に対してクラスの追加または削除を行うことができます。CSS で追加 / 削除したいクラスを設定しておけば、簡単な JavaScript コードで切り替えることができます。ぜひ試してみてください。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです！

こちらもチェック！ X (Twitter) @pyxofy・LinkedIn・Mastodon・Facebook

関連記事