css控制div顯示/隱藏方法及2種方法比較原碼

來源:互聯網
上載者:User

CSS中的display和visibility

css中display和visibility文法,他們都可以隱藏和顯示html元素。看齊來他們很相似,所以很多人還是會搞錯。
談們的屬性分別如下:

display:none|block;
display:none;時隱藏該html元素,確切的說,是在瀏覽器中消除該元素,不佔螢幕的空間。若其下有其他元素,就會上移到該空間地區(好像桌子上有100塊錢,現在我把它放在抽屜裡藏起來,桌子上放100錢的地方可以放在其他任何東西)。
dispaly:block;顯示已經隱藏的html元素,如果別的元素佔有了該空間時,他將下移,空間重新別原來的元素佔有。(把100塊錢重新從抽屜裡那出來放回桌子上)

visibility:hidden|visible;
visibility:hidden;隱藏該元素,正真的隱藏,但他還佔有那塊空間。這時,(桌子上有100塊錢,這是我蓋了桌布把他隱藏起來,錢還在那裡)。
visibility:visible;讓元素顯示(拿掉了桌布,看到了100塊錢)。

接下來用代碼來舉個例子,代碼:
<html>
<head>
<script type="text/javascript">
function testDisplay()
{
    var divD = document.getElementById("testD");
    if(divD.style.display=="none")
    {
        divD.style.display = "block";
    }
    else
    {
        divD.style.display = "none";
    }
}

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

運行一下框中的代碼就可以看到,當testD隱藏時,裡面所有的框都隱藏,而且下面的divV和按鈕都上移,而當divV隱藏的時候,只有他自己隱藏了,裡面的其他元素都沒有隱藏。(這裡主要是把裡面的div元素style屬性設定為display和visible,如果去掉也會隱藏,但是,按鈕還是不會上移,可以試一下。)

本文轉自CSDN部落格,轉載請標明出處:http://blog.csdn.net/czf164/archive/2008/05/15/2447580.aspx

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.