「JavaScript」displayプロパティで要素を表示(非表示)にするサンプル

2022年10月4日

環境
Google Chrome　 106.0.5249.91
Windows 10 Home 64bit

構文
1.初期表示でdisplayプロパティにnoneを指定して要素を非表示にしています
document.getElementById(セレクター名).style.display ="none";
2.const 変数名 = document.getElementById(セレクター名);
非表示を行う
変数名.style.display ="none";
表示を行う
変数名.style.display ="block";

使用例

<!DOCTYPE html>

<html>

<body>

<p id="cft">study skill become smart</p>

//初期表示は非表示

document.getElementById("cft").style.display = "none";

function addCheck(){

const tt = document.getElementById("cft");

if(tt.style.display=="block") {

// noneで非表示

tt.style.display = "none";

} else {

// blockで表示

tt.style.display = "block";

}

</script>

</body>

</html>

<!DOCTYPE html> <html> <body> <p id="cft">study skill become smart</p> <input type="button" value="検証" onclick="addCheck()" /> <script> //初期表示は非表示 document.getElementById("cft").style.display = "none"; function addCheck(){ const tt = document.getElementById("cft"); if(tt.style.display=="block") { // noneで非表示 tt.style.display = "none"; } else { // blockで表示 tt.style.display = "block"; } } </script> </body> </html>

<!DOCTYPE html>
<html>
<body>

<p id="cft">study skill become smart</p>
<input type="button" value="検証" onclick="addCheck()" />
<script>
//初期表示は非表示
document.getElementById("cft").style.display = "none";
function addCheck(){
    const tt = document.getElementById("cft");
    
    if(tt.style.display=="block") {
      // noneで非表示
      tt.style.display = "none";
    } else {
       // blockで表示
       tt.style.display = "block";
    
    }
}
</script>

</body>
</html>

実行結果
「検証」ボタンを押すと、「study skill become smart」が表示されます。
再度押すと非表示になります。

JavaScript

Posted by arkgame

関連投稿: