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