こんにちは、Ryohei(@ityryohei)です!

本記事では、JavaScriptで要素の表示・非表示を切り替える方法のご紹介しています。

ボタンをクリックしてある要素の表示・非表示を切り替えたい。どうすればいいの?

上記の疑問にお答えします。

では解説していきます。

styleのdisplayを変更して要素の表示・非表示を切り替える

JavaScriptのstyleでdisplayの値を変更して要素の表示・非表示を切り替えます。要素を表示する場合はdisplayの値をblockに、非表示にする場合はnoneにするポピュラーな切り替え方法です。

HTML

<button>Click Me!</button>
<article>
  <div id="box">Box</div>
</article>

JS

//ボタン要素を取得
let switchBtn = document.getElementsByTagName('button')[0];
//表示・非表示を切り替える要素を取得
let box = document.getElementById('box');

//styleのdisplayを変更する関数
let changeElement = (el)=> {

  if(el.style.display==''){
    el.style.display='none';
  }else{
    el.style.display='';
  }

}

//上記関数をボタンクリック時に実行
switchBtn.addEventListener('click', ()=> {
  changeElement(box);
}, false);

下記はサンプルのデモです。Click Meと表示されたボタンをクリックするとボックスの表示・非表示が切り替わります。

DEMO

See the Pen Element Switch 01|JavaScript by ryohei (@intotheprogram) on CodePen.

続いてclassを使用した要素の表示・非表示の切り替え方法をご紹介します。

classの追加・削除で要素の表示・非表示を切り替える

定義済みのclassを追加・削除して要素の表示・非表示を切り替えます。内容としては前項でご紹介したdisplayの変更と同じです。初期状態で非表示になっている要素にclassを追加し、displayの値を更新します。

HTML

<button>Click Me!</button>
<article>
  <div id="box" class="active">Box</div>
</article>

CSS

.active {
  display: block !important;
}

JS

let switchBtn = document.getElementsByTagName('button')[0];
let box = document.getElementById('box');

let changeElement = (el)=> {
  el.classList.toggle('active');
}

switchBtn.addEventListener('click', ()=> {
  changeElement(box);
}, false);

下記で動作をご確認いただけます。

DEMO

See the Pen Element Switch 02|JavaScript by ryohei (@intotheprogram) on CodePen.

classを使用するメリットは、一度に複数のスタイルを設定できる点です。本記事では要素の表示・非表示にフォーカスしていますが、同時に文字色や要素自体の大きさを変更したりする場合もあります。そういったときにclassを活用すると便利です。

最後に

JavaScriptにおいて要素の取得や属性の操作は基本となります。属性操作の応用で本記事の内容も実現できます。プログラミングの勉強を始めたばかりの頃は、書籍の内容が難しく感じたり、わからなさすぎて行き詰ることがあります。それでも続けてさえいれば着実に技術は身についていきますので、根気よく続けていただければと思います!

以上、JavaScriptで要素の表示・非表示を切り替える方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。