JavaScript displayプロパティで要素を表示するサンプル
環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119
構文
const 変数名 = document.getElementById(セレクター名);
//displayプロパティにnoneを指定します
変数名.style.display ="none";
//displayプロパティにblockを指定します
変数名.style.display="block";
使用例
<!DOCTYPE html> <html> <body> <p id="cft">test message</p> <input type="button" value="確認" /> <script> //初期表示は非表示 document.getElementById("cft").style.display="none"; function funA(){ const tt = document.getElementById("cft"); if(tt.style.display=="block"){ // noneで非表示 tt.style.display ="none"; }else{ // blockで表示 tt.style.display ="block"; } } </script> </body> </html>
実行結果
「確認」ボタンを押すと、「test message」が表示されます。
再度押すと非表示になります。