JavaScript displayプロパティで要素を表示するサンプル

2022年10月30日

環境
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="確認" onclick="funA()" />

<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」が表示されます。
再度押すと非表示になります。

JavaScript

Posted by arkgame

関連記事: