JS中style.display和style.visibility的区别

标签: js style display | 发表时间:2013-01-10 14:08 | 作者:kkdelta
出处:http://blog.csdn.net

在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来隐藏,但是其隐藏后仍然占据原来的空间。

<html>
<head>
<title>test</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
.titlediv{background-color:#eee;color:white;font-weight:bold;padding:10px;cursor:pointer }
.contentdiv{border:3px solid blue;height:100px;padding:10px; }
</style>
<script type="text/javascript">  
function toggle(divid){
	var odiv = document.getElementById(divid);
	odiv.style.display=(odiv.style.display=="none")?"block":"none";
}

function showhide(divid){
	var odiv = document.getElementById(divid);
	odiv.style.visibility=(odiv.style.visibility=="visible")?"hidden":"visible";
}
</script>    
</head>  
<body >  
	<div class="titlediv" onclick="toggle('divContetn1')">click here</div> 
	<div class="contentdiv" id="divContetn1">this is some content to show and hide
	</div>
	<p> </p>
	<div class="titlediv" onclick="toggle('divContetn2')">click here</div> 
	<div class="contentdiv" id="divContetn2">this is some content to show and hide
	</div> 
	<p> </p>
	<div class="titlediv" onclick="showhide('divContetn3')">click here</div> 
	<div class="contentdiv" id="divContetn3">this is some content to show and hide
	</div>
	<p> </p>
	<div class="titlediv" onclick="showhide('divContetn4')">click here</div> 
	<div class="contentdiv" id="divContetn4">this is some content to show and hide
	</div>		
</body>  
</html>

作者:kkdelta 发表于2013-1-10 14:08:45 原文链接
阅读:0 评论:0 查看评论

相关 [js style display] 推荐:

display属性的block,inline和inline-block

- - CSDN博客推荐文章
  none  此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. 此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素. (CSS2.1 新增的值) . 在css中,inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递.

android的样式(style)与主题(theme)

- - CSDN博客推荐文章
Android上的Style分为了两个方面:. 1,Theme是针对窗体级别的,改变窗体样式;. 2,Style是针对窗体元素级别的,改变指定控件或者Layout的样式. Android系统的themes.xml和style.xml(位于系统源代码frameworks\base\core\res\res\values\)包含了很多系统定义好的style,建议在里面挑个合适的,然后再继承修改.

【设计精美】有意义的日子:Meaningful Days with Photo Display

- sean - 爱Apps - www.iapps.im
精选限时免费应用,由 AppPusher 为您送达. 无限精彩,尽在 爱Apps - www.iapps.im. 本站原创内容,转载时请务必注明出处,谢谢. 大小: 11.6 MB 系统: 3.2+. 小编本都想好了叫做“那些美妙的日子”,没想到软件有官方中文译名,呵呵. 软件简单的说,就是可以用照片配合上背景音乐(可选)来对你有意义的日子来做个纪录和展示,并可以在到达某个特定的天数时提醒你.

iFixit 拆解 Thunderbolt Display ,大屏中窥探小细节

- gnawux - Engadget 中国版
距离苹果的 Thunderbolt Display 发布已经有两个月的时间了,不过对于 iFixit 的拆解,我们依然有兴趣. 让我们随着 iFixit 的解剖图来看看这款 27 寸 Thunderbolt Display (苹果宣称其是世界上首款 Thunderbolt 显示器)里面有啥秘密. 首先是液晶面板,为 LG 制造,和 Dell 的显示器 UltraSharp U2711 产商一样,不过具体参数有差别, 12 ms 反应时间对比戴尔6 ms ,而色彩上苹果为 16.7M 而戴尔是 1.07B.

微软用手势和 Metro Style 向触摸迈进

- Yibie - 爱范儿 · Beats of Bits
在《微软:“平板是一种 PC”》一文中,我们发现微软早在 20 年前就开始研究如何用笔来操作电脑,这种操作方式被他们称之为“笔势操控”. 而最近一些迹象显示,微软开始向“触摸操控”迈进. 一周前,微软注册的几个“触摸操控”专利曝光,透露将来微软可能采用的几种“触控手势”. 手指从屏幕外向屏幕内滑动,会自动拖出一个功能面板,用户可直接用手指点选相应的功能进行操作,比如复制、粘贴、剪切等等.

江南Style对互联网产品的启示

- - i天下网商
首先我要承认在【江南style】这件事上我非常后知后觉,当这个名词频繁出现的时候,我只是在潜意识里面惊诧了一下韩国人居然已经偷到了我们祖国的心腹. 后来看到某白人小胖出离愤怒的咆哮说北韩人(小胖捉实分不清南北韩)在洗美国人的脑,我终于经不住好奇心去围观了一下. 这一看给我看出了灵感,我发现这场热闹的江南风实在可以给做产品推广的我们提供很多启发.

江南Style点击率突破YouTube计数器上限

- - Solidot
YouTube的Google+账号透露,韩国歌手鸟叔的《江南Style》太受欢迎了,其点击率竟打破了YouTube的计数器上限. 《江南Style》的浏览量超过了21亿次,打破了32位整数计数器的上限(2,147,483,647),使得YouTube不得不将计数器升级到64位整数. 升级之后,YouTube的计数器能记录到最高9,223,372,036,854,775,808次浏览量,在可预见的未来应该没人能打破了.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

拾人牙慧:不同浏览器如何渲染不同border-style值

- Lee - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1972. 本文的一些测试结果不是出自我手,来自:How Do Browsers Render the Different CSS Border Style Values?. 满脑子都是国庆假期,要是原文翻译根本没有这个精气神.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.