- 浏览: 148636 次
- 性别:
- 来自: 上海
文章分类
visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:
注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。
-------------------------------
另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
display 属性分别为block, inline, none 值
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。
下面看我实例的代码和效果:
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)
----------------------------------------
display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例:
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:
<script> function toggleVisibility(me) { if (me.style.visibility == "hidden") { me.style.visibility = "visible"; } else { me.style.visibility = "hidden"; } } </script> <div onclick="toggleVisibility(this)" style="position:relative">第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div> <div>因为visibility会保留元素的位置,所以虽然第一行看不见了但位置还在,第二行内容不会上下移动。</div>
注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。
-------------------------------
另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
display 属性分别为block, inline, none 值
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。
下面看我实例的代码和效果:
<script> function toggleDisplay(me) { if (me.style.display == "block") { me.style.display = "inline"; alert("文本现在是:'inline'."); } else { if (me.style.display == "inline") { me.style.display = "none"; alert("文本现在是:'none'. 3秒钟后自动重新显示。"); window.setTimeout("document.getElementById('blueText').style.display='block';", 3000); } else { me.style.display = "block"; alert("文本现在是:'block'."); } } } </script> <div> 在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:pointer;">蓝色</span>文字上点击来查看效果. </div>
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)
----------------------------------------
display 属性分别为block, inline, none 值及使用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" onclick="oSpan.style.display='inline'"> <input type=button value="Block" onclick="oSpan.style.display='block'"> <input type=button value="None" onclick="oSpan.style.display='none'"> <input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'"> <input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> </P> <UL> <LI>将元素设为 block,会在该元素后换行。</LI> <LI>将元素设为 inline,会消除元素换行。</LI> <LI>将元素设为 none,隐藏该元素内容。</LI> </UL>
发表评论
-
Java-动态语言和静态语言
2014-06-25 10:40 609什么是动态语言和静态语言?http://haohetao.i ... -
hibernate 乐观锁与悲观锁使用
2014-05-27 10:57 318http://www.blogjava.net/baoyaer ... -
servlet什么时候被实例化?
2014-03-25 10:29 699http://blog.csdn.net/ji_ju/arti ... -
Struts2数据传输的背后机制:ValueStack(值栈)
2014-03-25 08:49 506http://blog.csdn.net/li_tengfei ... -
Spring中常用事务类型
2014-03-24 17:22 370PROPAGATION_REQUIRED--支持当前事务,如果 ... -
JAVA多线程--Runnable和Thread的区别
2014-03-24 14:17 518转载:http://blog.csdn.net/wwww198 ... -
JAVA中堆栈和内存分配
2014-03-19 09:32 556转:http://www.2cto.com/kf/20 ... -
关于“抽象类是否可继承实体类”的辨析。
2014-03-18 09:02 524转: http://blog.csdn.net/ckw1988 ... -
abstract class和interface有什么区别?
2014-03-18 08:29 598转:http://java.itcast.cn/new ... -
深入Java集合学习系列:HashMap的实现原理
2014-03-18 08:34 313转:http://zhangshixi.iteye.com/b ... -
JAVA多线程--sleep和wait的区别
2014-03-17 16:30 4991、这两个方法来自不同的类分别是,sleep来自Thread类 ... -
Spring动态代理
2014-03-17 11:11 702Spring代码分析一:加载与初始化 http://www. ... -
Request的getParameter和getAttribute方法的区别
2013-12-27 10:39 599原文:http://blog.sina.com.cn/s/ ... -
struts2
2013-12-02 20:30 500ActionContext ServletActionCont ... -
Java集合比较器总结
2013-11-21 15:40 1665一:Java 集合: 对于什么是集合我想不多言了,简单点理 ... -
java中import机制(指定import和import *的区别)
2013-10-30 09:36 654http://blog.csdn.net/shuwei003/ ... -
sql执行顺序
2014-05-27 10:52 4921.查询中用到的关键词主要包含六个,并且他们的顺序依次为 s ... -
造成死锁的原因和解决方案
2013-10-17 14:17 469http://blog.csdn.net/superbsoft ... -
Java对Map中的值进行排序
2013-08-28 11:08 2205Map<String, Integer> ma ... -
遍历Map的四种方法
2013-08-05 10:28 623public static void main(Strin ...
相关推荐
visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....
3.请描述一下cookies,sessionStorage和localStorage的区别? 4.浏览器的渲染机制一般分为几个步骤? …… 二.CSS面试题 1.display: none; 与visibility: hidden;的区别 2.外边距折叠(collapsing margins) 3.z-index是...
setTimeout("display2()",Math.round(Math.random()*10000)+10000) } } function flash(){ if (which==0){ if (document.layers) topmsg.bgColor=flashtocolor else topmsg.style.backgroundColor=flashtocolor ...
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....
JS实现页面侧边栏效果探究 目录 发现:display动画的应用实现:如何实现文首展示的效果 发现:display动画... 当然,这有很多种做法,比如:利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+poin
==============关于元素的显示和隐藏============= Visibility快于Display 让图画时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:使用CSS的visibility属性或者 display属性。对于绝对位置元素,diaplay和...
本文实例讲述了JavaScript实现广告的关闭与显示效果。分享给大家供大家参考。具体实现方法如下: js代码部分如下: [removed] <!-- function display(){ if(googlead.style.visibility == 'visible'){ googlead....
程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的: Code if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...
visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(//files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{ width:705px; list-style:none; ...
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。
display:none和visibility:hidden的区别 1.visibility:hidden 将元素隐藏,空间不释放 使用后仅仅视觉上看不见 所占据空间仍然存在 2.display:none 将元素显示设为无 空间释放 各种属性丢失 opacity的兼容...
visibility:在切换元素可见性的同时会保持元素在普通流中的位置和空间。它有两个值:visible(默认的)和hidden(不可见的), 例如: 代码如下: <p>Hello <b>John, how are you today?</p> 浏览器中是:Hello John...
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。 当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....
<script language="javascript"> var IE5=(document.getElementById && document.all)? true : false; var W3C=(document.getElementById)? true: false; var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; ...
#tabs div a:hover.unlock img {visibility:hidden;} #tabs p.bold {color:#069; padding-top:5px;} * html #tabs p.fire {margin-top:-15px;} * html #tabs form {margin-top:-20px;} #tabs p.buttons {text-align:...
之前我就纳闷了,visibility为什么可以实现div的隐藏和显示而display不可以,我明明记得以前可以的,原来是我在style的属性里面给它写的是visibility,没有写display,而以前写的是display <%@ page ...