JavaScriptでの要素の表示や非表示の切替の方法【現役エンジニアが解説】
今回は、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クラスを用意し、そのクラスを追加、削除することで要素の表示や非表示の切り替えができます。