首頁 > 文章 > web前端 > div css顯示隱藏div

div css顯示隱藏div

王林原創: 2023-05-27 11:03:071049瀏覽

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中文網其他相關文章！

JavaScript css css3 html 事件选择器内边距 display transition table

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css樣式的寫法下一篇：css樣式的寫法

看更多