JavaScriptでの要素の表示や非表示の切替の方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでの要素の表示や非表示の切替の方法について、displayとvisibilityのプロパティで切り替える場合に分け、簡単に解説していきます。

displayプロパティで表示や非表示を切り替える方法

要素のdisplayプロパティをnoneに設定すると要素が見えなくなります。

displayプロパティをnoneに設定した場合、その要素のスペースもなくなります。

element.style.display = "block"; // 表示
element.style.display = "none"; // 非表示

上記のコードのように、displayプロパティで要素の表示や非表示を切り替えることができます。

visibilityプロパティで表示や非表示を切り替える方法

要素のvisibilityプロパティをhiddenに設定しても要素は見えなくなります。

displayプロパティとは異なり、visibilityプロパティではhiddenでもスペースは残ります。

element.style.visibility = "visible"; // 表示
element.style.visibility = "hidden"; // 非表示

上記のコードのように、visibilityプロパティでも要素の表示や非表示を切り替えることが可能です。

displayプロパティを使った現実的な表示や非表示の切替の方法

displayプロパティの場合には、表示状態の値が必ずしもblockかどうかわかりません。

そのため、displayプロパティで切り替える場合には、非表示クラスで切り替えると良いです。

element.classList.add("display-none"); // 非表示
element.classList.remove("display-none"); // 表示

上記のコードのように、displayをnoneにしたCSSのdisplay-noneクラスを用意し、そのクラスを追加、削除することで要素の表示や非表示の切り替えができます。