javascript中 visibility和display的区别

 我来答
百度网友48b2b54
2016-10-19 · TA获得超过229个赞
知道小有建树答主
回答量:274
采纳率:50%
帮助的人:199万
展开全部

一、 display属性的常用属性值有两个,分别为
1、none: 隐藏,不占位,空件之间重新定位
2、block: 显示

二、  visibility属性的常用属性值有两个,分别为
 1、hidden: 隐藏,占位
2、visible : 显示

例子,

<html>
<head>
<title>js display属性与visibility属性的区别_www.jquerycn.cn</title>
<script language="javascript">
   function testVisibility()
   {
         document.all("tb_0").style.visibility="hidden";
        document.all("tb_1").style.visibility="visible"; 
   }
   function testDisplay()
   {
        document.all("tb_0").style.display="none";
        document.all("tb_1").style.display="block"; 
   }
   function test()
   {
       document.all("tb_0").style.visibility="visible";
       document.all("tb_1").style.visibility="visible"; 
       document.all("tb_0").style.display="block";
       document.all("tb_1").style.display="block";
   }
</script>
</head>
<body>
<form name="form1" method="post">
   <table id="tb_0">
    <tr>
     <td>内容测试--visible</td>
    </tr>
   </table>
   <table id="tb_1">
    <tr>
     <td>内容测试--hidden</td>
    </tr>
   </table>
   <input type="button" onClick="test();" value="还原">
   <input type="button" onClick="testVisibility();" value="测试visibility">
   <input type="button" onClick="testDisplay();" value="测试display">
</form>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
惠企百科
2022-12-01 · 百度认证:北京惠企网络技术有限公司官方账号
惠企百科
惠企百科网是一家科普类综合网站,关注热门中文知识,集聚互联网精华中文知识,本着自由开放、分享价值的基本原则,向广大网友提供专业的中文知识平台。
向TA提问
展开全部

区别:

1、占用域的空间不同。

visibility要占用域的空间,而display则不占用。

visibility和display都可以实现对页的隐藏,例如:

将元素display属性设为 block,会在该元素后换行。

将元素display属性设为 inline,会消除元素换行。

将元素display属性设为 none,隐藏该元素内容,且不占用域的空间。

将元素visibility属性设为 hidden,隐藏该元素内容,但占用域的空间。

将元素visibility属性设为 visible,显示元素内容。

2、回应正常文档流的不同。

如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none 。

在现实中我发现人们更多的倾向于使用display 属性(相信这也是大多数人的习惯)。当你决定用display:none 来隐藏一个元素时,你必须知道其它内容将填充到该元素留下的空白位置,从而改变页面的布局。

扩展资料

在SEO中有时我们会通过把堆砌的关键词隐藏而达到作弊的目的,但不应该使用visibility:hidden 和display:none ,而应该把关键词颜色设为和背景色相同,或者把关键词的字号设为非常小,而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为visibility:hidden 和display:none 的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的。

搜索引擎也理解这一做法(事实上搜索引擎往往忽略CSS),因此如果你的目的不是欺骗搜索引擎,你大可以放心地使用visibility:hidden 和display:none 去隐藏内容。

参考资料:百度百科-Visibility

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式