快捷導(dǎo)航

JS中style.display和style.visibility的區(qū)別實(shí)例說(shuō)明

更新時(shí)間：2013年03月27日 14:54:07 作者：

下面的例子說(shuō)明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會(huì)向上移動(dòng)，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來(lái)隱藏，但是其隱藏后仍然占據(jù)原來(lái)的空間

在JS中可以通過(guò)設(shè)置style.display或者style.visibility屬性來(lái)控制元素是否顯示，在style.display=block和style.visibility=visible的時(shí)候，元素被顯示，在style.display=none和style.visibility=hidden的時(shí)候，元素被隱藏。它們之間最大的區(qū)別是通過(guò)style.display=none隱藏的時(shí)候，元素不占據(jù)原來(lái)的位置，從文檔流中脫離，后續(xù)的元素填補(bǔ)其位置。通過(guò)style.visibility=hidden隱藏的時(shí)候，元素仍然占據(jù)原來(lái)的位置，只是被隱藏。

下面的例子說(shuō)明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會(huì)向上移動(dòng)，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來(lái)隱藏，但是其隱藏后仍然占據(jù)原來(lái)的空間。

<html> <head> <title>test</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style>  </head> <body > <div   id="vvxyksv9kd"   class="titlediv" onClick="toggle('divContetn1')">click here(內(nèi)容部分會(huì)隱藏，下面的內(nèi)容會(huì)上來(lái))</div> <div   id="vvxyksv9kd"   class="contentdiv" id="divContetn1">this is some content to show and hide </div> <p> </p> <div   id="vvxyksv9kd"   class="titlediv" onClick="toggle('divContetn2')">click here</div> <div   id="vvxyksv9kd"   class="contentdiv" id="divContetn2">this is some content to show and hide </div> <p> </p> <div   id="vvxyksv9kd"   class="titlediv" onClick="showhide('divContetn3')">click here(內(nèi)容部分會(huì)隱藏，下面的內(nèi)容不會(huì)上來(lái))</div> <div   id="vvxyksv9kd"   class="contentdiv" id="divContetn3">this is some content to show and hide </div> <p> </p> <div   id="vvxyksv9kd"   class="titlediv" onClick="showhide('divContetn4')">click here</div> <div   id="vvxyksv9kd"   class="contentdiv" id="divContetn4">this is some content to show and hide </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: