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

JavaScriptでCSSプロパティを使用して要素の表示・非表示を切り替える方法を３つご紹介します。

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

displayプロパティは要素の表示形式を決めるプロパティです。

要素を表示する場合はdisplay:block、非表示にする場合はdisplay:noneを指定します。

/* JavaScript */
// 要素を表示する
ele.style.display = 'block';

// 要素を非表示にする
ele.style.display = 'none';

/* JQuery */
// 要素を表示する
ele.css('display', 'block');

// 要素を非表示にする
ele.css('display', 'none');

displayで表示・非表示を切り替えると要素の存在自体が消える扱いになり、元の要素の高さが0になります。

サンプルでは緑色の要素の高さがなくなったことでオレンジ色の要素が上に移動しています。

タブの切り替えのような、元の要素の位置に別の要素を表示させたい場合などに使える手法になります。

こちらのサンプルではdocument.getElementById()で特定のid属性の要素を取得し、element.style.displayでcssのプロパティを直接編集しています。

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

その２　visibilityで表示・非表示を切り替える

visibilityプロパティは要素の可視状態を決めるプロパティです。

要素を表示する場合はvisibility: visible、非表示にする場合はvisibility: hiddenを指定します。

/* JavaScript */
// 要素を表示する
ele.style.visibility = 'visible';

// 要素を非表示にする
ele.style.visibility = 'hidden';

/* JQuery */
// 要素を表示する
ele.css('visibility', 'visible');

// 要素を非表示にする
ele.css('visibility', 'hidden');

displayプロパティと違い要素の存在自体は消えないため、元の要素の高さが残るのが特徴です。

入力欄上部に表示するエラーメッセージのように、元のレイアウトを維持しつつ特定条件下で要素を表示させたい場合などに有効です。

こちらのサンプルではjQueryの$('#id')で要素を取得し、css()メソッドを使って要素のスタイルを変更しています。

See the Pen changeDisplay2 by Usagi (@naniwa_usagi) on CodePen.

その３　opacityで表示・非表示を切り替える

opacityプロパティは要素の透明度を決めるプロパティです。

0〜1の数値が指定でき、0に近づくほど要素が透明になります。

opacity:0とすることで要素が透明になり、擬似的に非表示のような状態にすることができます。

/* JavaScript */
// 要素を表示する
ele.style.opacity = 1;

// 要素を非表示にする
ele.style.opacity = 0;

/* JQuery */
// 要素を表示する
ele.css('opacity', 1);

// 要素を非表示にする
ele.css('opacity', 0);

visibilityプロパティ同様に非表示時も元の要素の高さが残ることに加えて、クリックイベントを拾うことができるのが特徴です。

アニメーションで点滅しているボタンのように、要素が非表示の場合でもクリックイベントを拾いたい場合などに使える手法になります。

こちらのサンプルではopacityプロパティのデフォルト値が1であることを利用して、JavaScriptのtoggle()メソッドで要素の持つクラスを付けたり外したりと切り替えています。
1行の処理でまとめてスタイルを変更することができる処理のため、おすすめです。

See the Pen changeDisplay3 by Usagi (@naniwa_usagi) on CodePen.

参考　positionで表示・非表示を切り替える

positionプロパティは要素の表示位置を決めるプロパティです。

このプロパティを使って要素を画面外に移動することで擬似的に非表示のような状態にすることができます。

ただし、positionでレイアウトを変えるやり方は他の要素のレイアウトにも影響を及ぼす可能性があるため、あまりおすすめはできません。

基本的にはdisplay・visibility・opacityのいずれかのプロパティを変更するのがおすすめです。

こちらのサンプルでは先ほど紹介したJavaScriptのtoggle()メソッドをjQueryのtoggleClass()メソッドで書き換えたものになります。

jQueryではclassListが不要になる分、ソースコードをすっきりさせることができます。

See the Pen changeDisplay4 by Usagi (@naniwa_usagi) on CodePen.

まとめ

要素の表示・非表示を切り替える方法として、「display」「visibility」「opacity」「position」を変えるやり方を紹介しました。

それぞれ非表示になったときの要素の振る舞い方が異なるので、特徴をおさえてユースケースに合わせた実装を試してみてください。

今回は以上です。