DIV 隱藏與顯示 CSS
DIV 是 HTML 標籤中的一個重要的元素，它可以用來展示文字、圖片、影片等。在網頁設計中，我們經常會遇到需要將某些元素隱藏或顯示的情況，這需要使用 CSS 對 DIV 進行設定。本文將為大家介紹如何使用 CSS 來實現 DIV 的隱藏和顯示。
一、CSS display 屬性
CSS display 屬性可以控制元素在頁面中的顯示方式。 display 有多種取值，常用的有以下幾種：
我們可以透過設定 CSS 的 display 屬性，來實現 DIV 的隱藏和顯示效果。
下面以一個實例來說明：
在HTML 檔案中，我們建立一個DIV 元素：
然後在CSS 檔案中，設定DIV 的display 屬性：
#myDiv{
display:none; /* 默认隐藏 */
}
當頁面載入之後，這個DIV 元素就會被隱藏起來。此時，我們需要新增一個事件，來實現滑鼠點擊時的顯示效果。
在 JavaScript 中，可以透過設定元素的 style 屬性來改變 CSS 的 display 屬性，從而實現元素的隱藏和顯示。以下是具體操作：
/ 取得元素/
var myDiv = document.getElementById('myDiv');
#/ 當滑鼠點擊時，顯示DIV /
function showDiv(){
myDiv.style.display = 'block';
}
/ 當滑鼠點擊時，隱藏DIV /
function hiddenDiv( ){
myDiv.style.display = 'none';
}
這樣，當滑鼠點擊時，DIV 就會以區塊級元素的形式呈現在頁面上。當再次點擊時，又會被隱藏起來。
二、CSS visibility 屬性
另外一個控制元素隱藏和顯示的屬性是 visibility。 visibility 有兩個值：visible（可見）和 hidden（隱藏）。與 display 不同的是，當 visibility 被設定為 hidden 時，元素雖然被隱藏，但仍然佔據頁面的空間。
在HTML 檔案中，我們同樣建立一個DIV 元素：
然後在CSS 檔案中，設定DIV 的visibility 屬性：
#myDiv{
visibility:hidden; /* 默认隐藏 */
}
當頁面載入之後，這個DIV 元素就會被隱藏起來。這時，我們需要新增一個事件，來實現滑鼠點擊時的顯示效果。
在 JavaScript 中，我們同樣可以透過改變元素的 style 屬性來改變元素的 visibility 屬性。以下是具體程式碼：
/ 取得元素/
var myDiv = document.getElementById('myDiv');
#/ 當滑鼠點擊時，顯示DIV /
function showDiv(){
myDiv.style.visibility = 'visible';
}
/ 當滑鼠點擊時，隱藏DIV /
function hiddenDiv( ){
myDiv.style.visibility = 'hidden';
}
這樣，當滑鼠點擊時，DIV 就會變得可見。再次點擊時，又會變得隱藏。
三、總結
在網頁設計中，展示和隱藏元素是十分常見的需求。常用的控制元素隱藏和顯示的方式主要有兩種：一種是透過修改元素的 display 屬性來控制，另一種是透過修改元素的 visibility 屬性來控制。透過熟練這兩種方式，我們能夠更靈活地控制各種元素的顯示和隱藏，從而實現更好的網頁展示效果。
以上是css怎麼實作div隱藏與顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
