CSS技巧：透過display屬性實現DIV的顯示和隱藏
DIV作為頁面中常用的元素之一，被廣泛應用於佈局、格式化和內容分割等方面。在實際的開發中，我們有時需要透過程式碼來控制一個DIV元素的顯示與隱藏，這時就可以用到CSS的display屬性。
display屬性的作用
display屬性是CSS中用來控制元素是否顯示的一個基本屬性。它可以設定為多種取值來實現不同的顯示和隱藏效果。具體來說，display屬性的取值如下：
- none：隱藏元素，相當於在頁面上將該元素的空間完全移除。元素不佔據任何空間，也不會被渲染。
- block：將元素顯示為區塊級元素，即元素會獨佔一行，並在標籤前後自動換行。可設定寬度、高度、邊距和內邊距等樣式。
- inline：將元素顯示為行內元素，即元素不會獨佔一行，結尾會自動換行。不可以設定寬度、高度、邊距和內邊距等樣式。
- inline-block：將元素顯示為行內塊元素，具有區塊級元素的特性，同時也可以設定多條行內元素放在同一行顯示。
- table、table-row、table-cell等：將元素顯示為表格及其儲存格元素。
實作DIV的顯示和隱藏
接下來，我們透過幾個例子來示範如何用display屬性實作DIV的顯示和隱藏。
- 點擊按鈕實現DIV的顯示和隱藏
在這個範例中，我們透過一個按鈕來控制DIV的顯示和隱藏。
HTML部分：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS显示和隐藏DIV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="toggle()">点击显示/隐藏DIV</button>
<div id="myDiv" style="display:none;">这是一个DIV元素</div>
<script src="js/main.js"></script>
</body>
</html>登入後複製
CSS部分：
#myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}登入後複製
JavaScript部分：
function toggle() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}登入後複製
在這個範例中，我們在HTML的button元素中加入了一個onclick事件，並定義了一個toggle函數。這個函數會透過getElementById方法取得到我們需要控制的DIV元素，然後透過判斷該元素的display屬性值來實現顯示和隱藏的效果。
當我們點擊按鈕時，toggle函數會判斷目前DIV元素的display屬性值是否為none，如果是，則將其設為block，即顯示出來；如果不是，則將其設為none ，即隱藏起來。
- 利用:hover選擇器來實現DIV的顯示和隱藏
#在這個例子中，我們透過滑鼠懸停在元素上來控制DIV的顯示和隱藏。
HTML部分：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS显示和隐藏DIV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myDiv">
<p>鼠标悬停在这里，显示下面的DIV元素</p>
<div id="myPopup">这是一个DIV元素</div>
</div>
</body>
</html>登入後複製
CSS部分：
#myDiv {
width: 200px;
height: 80px;
background-color: #eee;
position: relative;
}
#myPopup {
width: 100px;
height: 100px;
background-color: #ddd;
display: none;
position: absolute;
top: 100%;
left: 0;
}
#myDiv:hover #myPopup {
display: block;
}登入後複製
在這個範例中，我們利用: hover選擇器來實作DIV元素的顯示和隱藏。當滑鼠停留在myDiv元素上時，myPopup元素就會顯示出來；當滑鼠離開myDiv元素時，myPopup元素就會隱藏起來。這時，我們只需要將myPopup元素的display屬性值設為none或block即可。
- 利用CSS3的transition動畫來實現DIV的顯示和隱藏
在這個例子中，為了讓DIV元素的顯示和隱藏更加平滑和自然，我們藉助了CSS3的transition動畫效果來實現。
HTML部分：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS显示和隐藏DIV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="toggle()">点击显示/隐藏DIV</button>
<div id="myDiv">这是一个DIV元素</div>
<script src="js/main.js"></script>
</body>
</html>登入後複製
CSS部分：
#myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .3s ease-in-out;
}登入後複製
JavaScript部分：
function toggle() {
var div = document.getElementById("myDiv");
if (div.style.opacity === "0") {
div.style.display = "block";
div.style.opacity = "1";
} else {
div.style.opacity = "0";
setTimeout(function() {div.style.display = "none";}, 300);
}
}登入後複製
在這個範例中，我們在CSS中為myDiv元素定義了一個all .3s ease-in-out的transition效果，這樣當我們修改myDiv元素的display屬性值或opacity屬性值時，就會依照這個效果來進行平滑的過渡。
在JavaScript中，我們透過setTimeout函數來延遲執行一段程式碼區塊，以等待transition效果的完成。當我們點擊按鈕時，toggle函數會判斷當前DIV元素的opacity屬性值是否為0，如果是，則將其設為1，同時將display屬性值設為block，即顯示出來；如果不是，則將其設定為0，然後等待transition的完成，最後將其display屬性值設為none，即隱藏起來。
總結
透過以上三個例子，我們可以看到，CSS的display屬性可以很方便地實現DIV元素的顯示和隱藏效果，並且在實作過程中可以藉助JavaScript和CSS3的幫助來使效果更加豐富和自然。希望這篇文章能對大家掌握CSS的display屬性有所幫助！
以上是div css顯示隱藏div的詳細內容。更多資訊請關注PHP中文網其他相關文章！
