css怎麼實作div隱藏與顯示

DIV 隱藏與顯示 CSS

DIV 是 HTML 標籤中的一個重要的元素，它可以用來展示文字、圖片、影片等。在網頁設計中，我們經常會遇到需要將某些元素隱藏或顯示的情況，這需要使用 CSS 對 DIV 進行設定。本文將為大家介紹如何使用 CSS 來實現 DIV 的隱藏和顯示。

一、CSS display 屬性

CSS display 屬性可以控制元素在頁面中的顯示方式。 display 有多種取值，常用的有以下幾種：

1. none：元素不顯示，也不佔用頁面空間；
2. block：元素會產生一個區塊級容器，佔用整個變寬，常用於顯示文字或圖片等區塊級元素；
3. inline：元素不會獨佔一行，只佔據自身的寬度和高度，常用於顯示連結、圖片等行內元素；
4. inline-block：與inline 相似，但可以設定寬度和高度；
5. flex：彈性佈局，可以靈活地分配元素的空間。

我們可以透過設定 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中文網其他相關文章！