DIV中display和visibility属性差别
DIV中display和visibility属性差别
DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流
本节向大家描述一下DIV中display和visibility的差别,visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征,虽然它们都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
DIV中display和visibility属性差别
visibility属性:
确定元素显示还是隐藏;
visibility="visible|hidden",visible显示,hidden隐藏。
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
例如:
<scriptlanguagescriptlanguage="javascript">
functiontoggleVisibility(me)
{
if(me.style.visibility=="hidden")
{
me.style.visibility="visible";
}
else
{
me.style.visibility="hidden";
}
}
</script> <DIVonclickDIVonclick="toggleVisibility(this)"
style="position:relative">
第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。
</DIV>
<DIV>因为visibility会保留元素的位置,所以第二行不会移动.</DIV>
看到第一行:由于"hidden"和"visible"的影响会。因为visibility会保留元素的位置,所以第二行不会移动.
注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一行代码成为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。
display属性:
就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
block:
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<DIV>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<DIV>一样工作。
inline:
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<DIV>,它也将会被组合成像<span>那样的输出流。
none:
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。
例如:
下面看我实例的代码和效果:
例:
<scriptlanguagescriptlanguage="javascript">
functiontoggleDisplay(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("blueText.style.display='block';",
3000,"javascript");
}
else{
me.style.display="block";
alert("文本现在是:'block'.");
}
}
}
</script> <DIV>在<spanidspanid="blueText"
onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">
蓝色</span>文字上点击来查看效果.</DIV>
DIV中display和visibility属性差别的更多相关文章
- CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...
- display 与 visibility
项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...
- css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- 元素隐藏的方式之--hidden,display,visibility
<html lang="en"> <head> <meta charset="UTF-8"> <title>标签 ...
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- div和span、relative和absolute、display和visibility的区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
- css中的display以及position属性
我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...
- 今天我们来讨论一下display和visibility两个CSS属性。
在讨论着两个属性之前我们先来看看HTML标签的全局属性.就是可以直接在HTML标签上直接写的属性. 以下是菜鸟教程的截图: 1.看以下第一个快捷键的属性accesskey;设置的就不多说了.主要就是2 ...
- Android笔记——Android中visibility属性VISIBLE、INVISIBLE、GONE的区别
在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为"visible "."invisible"."gone&quo ...
随机推荐
- Linux磁盘扩容
Linux磁盘扩容 fdisk -l # 查看硬盘信息 lvextend -L +1G /dev/mapper/vg00-lvroot 或者 lvextend -l +%FREE /dev/mappe ...
- 即将来到: CSS Feature Queries (CSS特性查询)
Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否 ...
- C#应用视频教程1.3 Socket通信客户端完善
我们先把前面的代码封装成一个完整的类,因为跟网络相关的方法并不一定是建立socket的服务器和客户端,所以还是应该把两个分开,比如获取本机IP,修改本机IP,PING远程主机这些事情应该放在一个单独的 ...
- hdu 4983 Goffi and GCD(数论)
题目链接:hdu 4983 Goffi and GCD 题目大意:求有多少对元组满足题目中的公式. 解题思路: n = 1或者k=2时:答案为1 k > 2时:答案为0(n≠1) k = 1时: ...
- tableview的两个重用cell方法
今天在学习IAP的时候无意间看到原来 tableView: cellForRowAtIndexPath:方法中有两个获得重用cell的方法,一直以来都是用 UITableViewCell *cel ...
- UISlider 设置增量
UISlider 设置增量 UISlider *slier = [[UISlider alloc]initWithFrame:CGRectMake(wu500.right, , , )]; slier ...
- [每日一题] OCP1z0-047 :2013-08-25 正则表达式REGEXP_LIKE-----‘harddisks’.................108
正确答案:AB A. 'hard+.s'能够匹配harddisks,以hard开头,其中表达式的d+号代表任意个d(至少出现一次d),“.”代表除了换行符之外的任意字符, 可以代表d和s之间的&quo ...
- 判断IE浏览器版本的精简脚本
IE浏览器不管是什么版本,总是跟Web标准有些不太兼容.对于代码工作者来说,自然是苦不堪言,为了考虑IE的兼容问题,不管是写 CSS 还是 JS,往往都要对 IE 特别对待,这就少不了做些判断.本文不 ...
- MySQL InnoDB简介
从MySQL 5.5版本开始InnoDB已经是默认的表存储引擎 InnoDB 1:完全支持ACID 2:支持行级锁 3:支持MVCC 4:支持外键 MySQL 5.1版本 MySQL 5.1版本之前, ...
- js 动态创建变量
js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...