JS中style.display和style.visibility的区别实例说明
更新时间：2013年03月27日 14:54:07 作者：
下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不占据原来的位置，从文档流中脱离，后续的元素填补其位置。通过style.visibility=hidden隐藏的时候，元素仍然占据原来的位置，只是被隐藏。
下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
这篇文章主要介绍了数据结构与算法（Stack），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了在JavaScript中如何设置私有属性,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-03-03
这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下2016-03-03
JavaScript中使用Substring删除字符串最后一个字符
删除字符串最后一个字符的方法有很多，在本文将为大家介绍下js中的substring是如何做到的，需要的朋友可以参考下2013-11-11
不知道屏幕前的朋友们，有没有和我一样，觉得LRU算法原理很容易理解，实现起来却很复杂。所以本文就为大家整理了一下实现的示例代码，需要的可以参考一下2023-04-04
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。这篇文章主要介绍了Javascript闭包,需要的朋友可以参考下2017-03-03
这篇文章主要为大家介绍了JavaScript进阶之前端文件上传和下载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
大型网站往往很矛盾，想用户在首页看到更多东西，又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接，到子页面。2010-05-05
JavaScript本地数据存储sessionStorage与localStorage使用详解
这篇文章主要介绍了JavaScript本地数据存储sessionStorage与localStorage使用，localStorage：永久存储在本地，适合保存在本地的数据。sessionStorage：会话级的存储，敏感帐号一次登陆2022-10-10
在代码逻辑中更多的是用关联数组的方式。但即使是这样我们也很少使用对象类型作为键值对的键名。2010-07-07
最新评论