|
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不占据原来的位置，从文档流中脱离，后续的元素填补其位置。通过style.visibility=hidden隐藏的时候，元素仍然占据原来的位置，只是被隐藏。
下面的例子说明了这种区别：在这个例子中，pContent1和pContent2隐藏的时候用的是style.display=none，这时候，后面的p会向上移动，占据已经隐藏的p的空间。pContent3和pContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间。
[html] <html> <head> <title>test</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> .titlep{background-color:#eee;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentp{border:3px solid blue;height:100px;padding:10px; } </style> <script type="text/javascript"> function toggle(pid){ var op = document.getElementById(pid); op.style.display=(op.style.display=="none")?"block":"none"; }
function showhide(pid){ var op = document.getElementById(pid); op.style.visibility=(op.style.visibility=="visible")?"hidden":"visible"; } </script> </head> <body > <p class="titlep" onclick="toggle('pContetn1')">click here</p> <p class="contentp" id="pContetn1">this is some content to show and hide </p> <p> </p> <p class="titlep" onclick="toggle('pContetn2')">click here</p> <p class="contentp" id="pContetn2">this is some content to show and hide </p> <p> </p> <p class="titlep" onclick="showhide('pContetn3')">click here</p> <p class="contentp" id="pContetn3">this is some content to show and hide </p> <p> </p> <p class="titlep" onclick="showhide('pContetn4')">click here</p> <p class="contentp" id="pContetn4">this is some content to show and hide </p> </body>
|
|
|
