如何隱藏頁面加載的div，然后正常使用顯示/隱藏功能

Question

當單擊“<div”時，我嘗試使用隱藏/顯示功能來顯示圖像。 當我第一次加載到頁面上時，圖像已經加載到屏幕上。 我希望圖像在頁面加載時隱藏，允許在單擊時顯示圖像。

 function active01() { var x = document.getElementById("img01"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 #img01 { width: 800px; padding-left: 30px; display: none; }

 <div onclick="active01()" id="line01"> Exhibition_Design_The_Telephone_book_001....................2009-001</div><br> <img id="img01" src="images/01 Exhibition design.jpg" alt="Exhibition_Design_The_Telephone_book_001....................2009-001"><br>

Answer 1

 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

 #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; display: none; margin-top: 20px; }

 <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is my DIV element. </div>

檢查這個例子