Into the Program

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

Image

JavaScriptで要素の表示・非表示を切り替える方法のご紹介です。ボタン要素をクリックして、特定の要素の表示・非表示になります。

本記事の内容

  • styleのdisplayで表示・非表示を切り替える方法
  • classの追加・削除で表示・非表示を切り替える方法

では解説していきます。

styleのdisplayで表示・非表示を切り替える

JavaScriptのstyleでdisplayを変更して切り替える方法です。

「javascript 表示 非表示 切り替え」などで検索すると結果として下記の内容がヒットするかと思います。

CSSの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);

DEMO

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

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

特定のclassを追加・削除して要素の表示・非表示を切り替える方法になります。切り替える要素のデフォルトは非表示とし、追加・削除するclassのacrivesにdisplay:blockを設定しておきます。

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 ryoy (@intotheprogram) on CodePen.

まとめ

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

もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊となっています。

SHARE