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

2022年10月30日

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119

構文
const 変数名 = document.getElementById(セレクター名);
visibilityプロパティにhiddenを指定します
変数名.style.visibility ="hidden";

visibilityプロパティにvisibleを指定します
変数名.style.visibility ="visible";

使用例

<!DOCTYPE html>
<html>
<body>

<p id="cft">test message</p>
<input type="button" value="表示" onclick="funA()" />

<script>
//初期表示は非表示
document.getElementById("cft").style.visibility ="hidden";

function funA(){
      const cft = document.getElementById("cft");

      if(cft.style.visibility=="visible"){
            // hiddenで非表示
            cft.style.visibility ="hidden";
      }else{
            // visibleで表示
            cft.style.visibility ="visible";
      }
}
</script>

</body>
</html>

結果
「表示」ボタンを押すと、「test message　123」が表示されます。

JavaScript

Posted by arkgame

関連記事: