DIV CSS 顯示與隱藏
DIV 是 HTML 中一個常用的標籤，用於分割頁面並實作佈局。而在頁面的互動效果中，我們有時需要動態地顯示或隱藏某些 DIV 元素。這時，我們可以利用 CSS 的 display 屬性來控制 DIV 的可見性。
一、display 屬性
display 屬性用來控制 HTML 元素的顯示方式。它可以取值為以下幾種：
設定為 none 時，元素將被隱藏，並且不會在頁面內留下任何空間。
設定為 block 時，元素將以區塊層級元素的形式顯示，即元素佔據一行，並且容器的寬度會被填滿。
設定為 inline 時，元素將以行內元素的形式顯示，即多個元素可以在同一行顯示。
設定為inline-block 時，元素將以行內區塊級元素的形式顯示，即多個元素可以在同一行顯示，並且元素之間有一定的間距。
設定為 table 時，元素會以表格形式顯示，並且可以使用表格相關的 CSS 屬性來控制元素的佈局。
以上這些取值都可以用在 DIV 元素的 display 屬性中。
二、基本語法
透過設定 display 屬性，我們可以實作 DIV 元素的顯示或隱藏。以下是基本的語法：
//显示元素
document.getElementById('example').style.display = 'block';
//隐藏元素
document.getElementById('example').style.display = 'none';以上程式碼中，我們透過 getElementById 取得 id 為 example 的 DIV 元素，然後透過設定 style.display 屬性來控制元素的顯示或隱藏。
三、實例示範
下面我們將透過實例示範來說明如何使用 CSS 的 display 屬性來控制元素的顯示或隱藏。
以下是一個DIV 元素：
<div id="example">Hi,我是DIV元素！</div>
我們可以使用以下程式碼將這個元素隱藏起來：
document.getElementById('example').style.display = 'none';在這個範例中，我們取得id 為example 的DIV 元素，然後將它的display 屬性設為none，從而實現了元素的隱藏。
如果我們希望顯示一個先前被隱藏的DIV 元素，我們可以使用以下程式碼：
document.getElementById('example').style.display = 'block';這樣就可以將之前被隱藏的DIV 元素重新顯示出來了。
前面講解 display 屬性時，我們提到了可以設定區塊級、行內、行內區塊級等元素的顯示方式。我們同樣可以透過這種方式來更改 DIV 元素的顯示方式。
例如，我們可以使用以下程式碼將一個DIV 元素修改為行內元素：
document.getElementById('example').style.display = 'inline';這樣，原本佔據一整行的DIV 元素就會變成跟文字一樣排列在行內了。
四、總結
在頁面互動效果中，我們常常需要動態地控制元素的顯示或隱藏。使用 CSS 的 display 屬性可以方便地實現這項功能。透過簡單的語法，我們可以控制 DIV 元素的真實存在與否，以及修改它的顯示方式。注意，修改 display 屬性也會影響到元素後代的顯示方式。
以上是css怎麼控制div的顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
