JavaScript visibilityプロパティで要素を表示するサンプル
環境
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="表示" /> <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」が表示されます。