CSS中的DIV顯示隱藏DIV
DIV是HTML中最常用的元素之一，它可以用來建立網頁中的各種佈局和容器。而在CSS中，使用DIV來顯示或隱藏其他DIV也是一種有效的技術。本文將介紹如何使用CSS來實現DIV的顯示與隱藏。
顯示DIV元素
要將一個DIV元素顯示出來，可以使用CSS屬性display來控制其顯示方式。 display屬性有四個常用的取值類型：
- block：將元素顯示為區塊級元素。
- inline-block：將元素顯示為行內區塊元素（類似行內元素，但具有區塊級元素的特徵）。
- inline：將元素顯示為行內元素（例如文字）。
- none：將元素隱藏，並在頁面中不佔任何空間。
例如，下面的CSS樣式將一個ID為「demo」的DIV元素顯示為區塊級元素：
demo {
}
當然，你也可以將其顯示為行內塊元素或行內元素，只需要將display屬性的取值類型改為「inline-block」或「inline」。
隱藏DIV元素
要隱藏一個DIV元素，最常用的方法是樣式display屬性的取值類型設定為“none”，如下所示：
##demo {
}
這個方法可以讓目標DIV元素完全消失，即使你用JavaScript或其他方式取得其值，也無法取得任何內容。如果你將一個DOM元素的display設定為“none”，那麼在頁面上它將不會顯示——即使你設定了高度和寬度，它也不會出現。
當然，你也可以用其他方法來隱藏DIV元素，例如使用visibility屬性。 visibility屬性的取值型別包括：
visible：元素可見。 hidden：元素不可見，但在頁面中佔用位置。 collapse：用於表格，元素會被折疊。
例如，下面的CSS樣式將一個ID為「demo」的DIV元素設定為不可見：
demo {
}
這時候，這個DIV元素將不可見，但是在頁面上仍然佔用位置，當你用JavaScript或其他方式存取其屬性時，它也仍然可見。
使用JavaScript來控制DIV元素的顯示和隱藏
在某些情況下，你可能需要使用JavaScript來控制DIV元素的顯示和隱藏。這時候，我們可以使用DOM API提供的style屬性來修改元素的CSS樣式。例如，下面的JavaScript程式碼將一個ID為「demo」的DIV元素顯示出來：
document.getElementById("demo").style.display = "block";
#同樣的，我們也可以將其隱藏：
document.getElementById("demo").style.display = "none";
需要注意的是，style屬性只能存取內聯樣式，而無法存取外部樣式表和嵌入式樣式表。如果你使用外部樣式表控制元素的樣式，那麼你就需要使用其他方法來修改樣式表，例如透過DOM API操作link元素來實現。
總結
CSS中使用DIV元素來顯示或隱藏其他元素是一種非常實用的技術，它可以用來建立動態網頁效果、隱藏廣告和內容、使用JavaScript控制元素狀態等。要注意的是，display屬性和visibility屬性的值型有很大的差別，應該要根據具體實現的效果來選擇使用。
在使用JavaScript控制元素的樣式時，應該注意瀏覽器的相容性問題，以便更好地支援各種平台和裝置。同時，建議在盡可能的情況下使用CSS來控制元素的樣式，以提高程式碼的可維護性和效能。
以上是css div顯示隱藏div的詳細內容。更多資訊請關注PHP中文網其他相關文章！
