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>

//初期表示は非表示

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>

<!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>

<!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

関連投稿: