如何實現CSS控制DIV層顯示與隱藏-css教學-PHP中文網

首頁

web前端

css教學

如何實現CSS控制DIV層顯示與隱藏

不言

Jun 14, 2018 pm 05:10 PM

本文為大家帶來了CSS控制p層顯示和隱藏的方法，是前端學習必須要掌握的基礎知識，非常不錯，具有參考借鑒價值，感興趣的小伙伴一起學習吧

#CSS中的display和visibility屬性

css中display和visibility可以隱藏和顯示html元素包含p層。看起來兩者非常類似，很多人會搞混。以下分別介紹兩者的屬性：

display:none|block;

display:none;

隱藏該html元素，確切的說，是在瀏覽器中消除該元素，不佔螢幕的空間。若其下有其他元素，就會上移到該空間區域（好像桌子上有100塊錢，現在我把它放在抽屜裡藏起來，桌子上放100錢的地方可以放在其他任何東西）。

dispaly:block;

顯示已經隱藏的html元素，如果別的元素佔有了該空間時，他將下移，空間重新別原來的元素佔有。（把100塊重新從抽屜裡那出來放回桌上）。

visibility：hidden|visible;

visibility:hidden;

隱藏該元素，正真的隱藏，但他仍佔有那塊空間。這時，（桌上有100塊錢，這是我蓋了桌布把他藏起來，錢還在那裡）。

visibility:visible;

讓元素顯示（拿掉了桌布，看到了100塊）。

所以display和visibility控制的分別是html元素是否存在和是否顯示，display的屬性定義該元素存在或不存在，而visibility的屬性只是控制該元素是否顯示出來，實際上還是存在的。

接下來用程式碼來舉個例子，程式碼：

<html>   
<head>   
<script type="text/javascript">   
function testDisplay()   
{   
    var pD = document.getElementById("testD");   
    if(pD.style.display=="none")   
    {   
        pD.style.display = "block";   
    }   
    else   
    {   
        pD.style.display = "none";   
    }   
}   
function testVisibility()   
{   
    var pV = document.getElementById("testV");   
    if(pV.style.visibility =="hidden")   
    {   
        pV.style.visibility ="visible";   
    }   
    else   
    {   
        pV.style.visibility = "hidden";   
    }   
}   
</script>   
</head>   
</body>   
<p id="testD" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Display   
        </p>   
    </p>   
</p>   
<p id="testV" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Visibility   
        </p>   
    </p>   
</p>   
<input type="button" value="TestDisplay" onclick="testDisplay()"/>   
<input type="button" value="TestVisibility" onclick="testVisibility()"/>   
</body>   
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關建議：

關於css flex 的彈性佈局

CSS3的default偽類別選擇器的解析

以上是如何實現CSS控制DIV層顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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