如何在網頁加載時隱藏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>