div css顯示隱藏div-前端問答-PHP中文網

首頁

web前端

前端問答

div css顯示隱藏div

王林

May 27, 2023 am 11:03 AM

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

陳述

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

了解usestate（）：綜合反應國家管理指南Apr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

使用React的優點是什麼？Apr 25, 2025 am 12:16 AM

ReactispupularduetoItsOmpontement，基於虛擬，虛擬詞，Richecosystem和declarativedation.1）基於組件的harchitectureallowslowsforreusableuipieces。

在React中調試：識別和解決共同問題Apr 25, 2025 am 12:09 AM

todebugreactapplicationsefectefectionfection，usethestertate：1）proppropdrillingwithcontextapiorredux.2）使用babortControllerToptopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRaceeDitions.3）intleleassynChronOusOperations.3）

反應中的usestate（）是什麼？Apr 25, 2025 am 12:08 AM

usestate（）inrectallowsStateMagementionInfunctionalComponents.1）ITSIMPLIFIESSTATEMAGEMENT，MACHECODEMORECONCONCISE.2）usetheprevcountfunctionToupdateStateBasedonitspReviousViousViousvalue，deveingingStaleStateissues.3）

usestate（）與用戶ducer（）：為您的狀態需求選擇正確的掛鉤Apr 24, 2025 pm 05:13 PM

selectUsestate（）forsimple，獨立的variables; useusereducer（）forcomplexstateLogicorWhenStatedIppedsonPreviousState.1）usestate（）isidealForsImpleupDatesLikeToggGlikGlingaBglingAboolAboolAupDatingacount.2

使用usestate（）管理狀態：實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案，因為它簡化了狀態管理，使代碼更清晰、更易讀，並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量，2)它通過鉤子機制在重新渲染間記住狀態，3)使用useState可以利用React的優化如備忘錄化，提升性能，4)但需注意只能在組件頂層或自定義鉤子中調用，避免在循環、條件或嵌套函數中使用。

何時使用usestate（）以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate（）forlocalComponentStateMangementighatighation; 1）usestate（）isidealforsimple，localforsimple.2）useglobalstate.2）useglobalstateSolutionsLikErcontExtforsharedState.3）

React的可重複使用的組件：增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1）heSredunceRedUndenceNandSimplifyUpdates.2）yensureconsistencyInuserexperience.3）

See all articles