如何在网页加载时隐藏div

Question

我有一个显示/隐藏div的基本脚本。 我将其用于下拉菜单。

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

我正在寻找页面加载时隐藏的div元素，而不是显示并不得不单击以切换它。

任何帮助表示赞赏！

Answer 1

使用display: none div中display: none ，如下所示

<div id="myDIV" style="display:none">
  This is my DIV element.
</div>

或者您可以创建一个类并分配给div。

<style>
.hide{
   display:none;
}
</style>


<div id="myDIV" class="hide">
  This is my DIV element.
</div>

Answer 2

除了CSS，您还可以使用JavaScript通过利用事件（例如onload）来操纵网页的显示。

 window.onload = function(){ document.getElementById("myDIV").style.display='none'; }; 

 <div> This is the first DIV element. </div> <div id="myDIV"> This is the 2nd DIV element. </div> <div> This is the last DIV element. </div> 

Answer 3

使用以下方法，您可以告诉浏览器忽略页面上的这些元素。

在HTML或CSS文件中的8号元素上使用display none。

 <div style="display: none"> This is my DIV element. </div> 

隐藏属性也很有帮助。

 <div hidden> This is my DIV element. </div>