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

最新推荐文章于 2022-02-16 21:36:08 发布

weixin_34234829

最新推荐文章于 2022-02-16 21:36:08 发布

阅读量280

点赞数

文章标签： javascript ViewUI

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" οnclick="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" οnclick="oSpan.style.display='inline'"> 

    <input type=button value="Block" οnclick="oSpan.style.display='block'"> 

    <input type=button value="None" οnclick="oSpan.style.display='none'"> 

    <input type=button value="Hidden" οnclick="oSpan.style.visibility='hidden'">

    <input type=button value="Visible" οnclick="oSpan.style.visibility='visible'"> 

</P>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34234829

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style="visibility: hidden"和 style=“display:none”之间的区别

style=“display:none” 隐藏页面元素: &lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function removeElement(){document.getElementById("p1").style.display="none";}&lt;/script&gt;&
复制链接

扫一扫