style="visibility: hidden"和 style=“display:none”之间的区别
Posted Mr_伍先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了style="visibility: hidden"和 style=“display:none”之间的区别相关的知识，希望对你有一定的参考价值。
style=“display:none” 隐藏页面元素:
<html> <head> <script type="text/javascript"> function removeElement() { document.getElementById("p1").style.display="none"; } </script> </head> <body> <h1>Hello</h1> <p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <input type="button" onclick="removeElement()" value="Do not display paragraph" /> </body> </html>
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
通过以下代码，比较两者之间的差异:
<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>
<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>
<P>
<input type=button value="Inline" onclick="oSpan.style.display=‘inline‘">
<input type=button value="Block" onclick="oSpan.style.display=‘block‘">
<input type=button value="None" onclick="oSpan.style.display=‘none‘">
<input type=button value="Hidden" onclick="oSpan.style.visibility=‘hidden‘">
<input type=button value="Visible" onclick="oSpan.style.visibility=‘visible‘">
</P>
以上是关于style="visibility: hidden"和 style=“display:none”之间的区别的主要内容，如果未能解决你的问题，请参考以下文章
__attribute__((visibility("default"))) [转]