码迷,mamicode.com
首页 > 其他好文 > 详细

style="visibility: hidden"和 style=“display:none”之间的区别

时间:2017-09-20 00:34:03      阅读:310      评论:0      收藏:0      [点我收藏+]

标签:move   blog   设置   line   play   lock   nbsp   put   cti   

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”之间的区别

标签:move   blog   设置   line   play   lock   nbsp   put   cti   

原文地址:http://www.cnblogs.com/mr-wuxiansheng/p/7554550.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!