JS中style.display和style.visibility的区别
来源:互联网 发布:毛领皮夹克 知乎 编辑:程序博客网 时间:2024/05/16 19:18
在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>
- JS中style.display和style.visibility的区别
- JS中style.display和style.visibility的区别
- JS中style.display和style.visibility之间的区别
- JS中style.display和style.visibility的区别
- style.visibility和style.display的区别
- style.visibility和style.display的区别
- style.visibility和style.display的区别
- css样式中style.visibility和style.display的区别
- JS中style.display和style.visibility的区别【转自:红黑联盟】
- javascript----style 中visibility和display之间的区别
- JAVASCRIPT----style 中visibility和display之间的区别(ZT)
- html中 style 显示属性: display 和 visibility的区别
- JAVASCRIPT----style 中visibility和display之间的区别
- JAVASCRIPT:style 中visibility和display之间的区别
- style.display与style.visibility的区别
- style.display 和 style.visibility
- style="visibility: hidden"和 style=“display:none”区别
- style="visibility: hidden"和 style=“display:none”区别
- oracle中rowid和rownum的区别
- ArcGIS For JavaScript API Toggle multiple ArcGIS Online services(切换多个ArcGIS Online服务)————(十五)
- The Anatomy of a Large-Scale Hypertextual Web Search Engine
- Computer Science Conference Rankings
- string和String 的对比
- JS中style.display和style.visibility的区别
- hadoop乱码
- Ubuntu 12.04 Unity桌面环境vnc配置手记
- Android开发入门教程--2.Android应用程序结构分析
- android 自定义view attr
- nginx upstream 的几种分配方式
- OAUTH协议简介
- ios开发之锁屏代码
- onInterceptTouchEvent和onTouchEvent调用时序