在網頁開發中，經常需要使用JavaScript動態隱藏或顯示元素，今天我們來專門聊一下如何隱藏元素。
使用JavaScript隱藏元素，我們可以使用以下兩種方式：使用CSS，在標記中添加樣式來隱藏元素，或者使用JavaScript操作DOM來隱藏元素。其中，前一種方式最為簡單，但是會增加CSS文件大小和下載時間，而且不夠靈活。我們今天主要介紹通過JavaScript隱藏元素的方式。
使用JavaScript隱藏元素最為基礎的方式是使用
style.display屬性。這個屬性控制元素在網頁中的顯示方式，它有以下幾種取值：
display:block;
元素會生成一個框，并排列在頁面上，即使它是空的。display:none;
元素不會在頁面上顯示，并且頁面不為它保留空間。display:inline;
元素會根據上下文決定是否生成框，元素隨后會生成在一行上。display:inline-block;
相當于同時設置了inline和block兩個屬性，元素隨后會呈現為內聯元素外框。display:flex;
元素變成了一個塊級伸縮盒子，可以通過flex屬性來設置伸縮元素之間的屬性。
比如，我們有以下的HTML代碼：
<span id="mySpan">這是我要隱藏的元素</span>我們可以使用以下JavaScript代碼來隱藏它：
document.getElementById("mySpan").style.display = "none";在這段代碼中，我們使用了Document對象的getElementById方法，獲取到id為mySpan的元素，并將其style下的display屬性設置為none。這樣，元素就會被隱藏掉了。除了直接設置display屬性，我們還可以使用visibility屬性來隱藏元素。這兩種方式的區別在于，使用display屬性隱藏元素會移除元素在DOM樹中的位置，而使用visibility屬性則不會。比如下面這個例子：
<span id="mySpan1">這是我要隱藏的元素1</span><br/><span id="mySpan2">這是我要隱藏的元素2</span>我們現在將它們隱藏掉：
document.getElementById("mySpan1").style.display = "none";<br/>document.getElementById("mySpan2").style.visibility = "hidden";此時，第一個元素會被移除掉，頁面會重新排版，而第二個元素只是不會被顯示，但是仍然占用原來的位置和布局。當然，上面的兩種方法只是最基礎的隱藏元素的方式。在實際開發中，還有很多其他方法可以實現更復雜的隱藏方式，如利用DOM實現動態切換元素的class屬性等等。希望今天的介紹對大家有所幫助。
上一篇div 顯示word