如何隐藏页面加载的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>

检查这个例子