【JavaScript】要素の表示・非表示を切り替える

こんにちは、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で要素の表示・非表示を切り替える方法のご紹介でした！