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 ...
随机推荐
- (转)一个非常好的akka教程
akka系列文章目录 akka学习教程(十四) akka分布式实战 akka学习教程(十三) akka分布式 akka学习教程(十二) Spring与Akka的集成 akka学习教程(十一) akka ...
- CPU五级流水线project(带Hazard)
project简单介绍: 计算机组成原理课程Project--五级流水线hazard处理 思路说明: CPU架构图: CPU指令集: 代码在这里:cpu_hazard
- Oracle 之 分析函数
一.分析函数 1.分析函数 分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计值. 2.分析函数 ...
- 在Flex (Flash)中嵌入HTML 代码或页面—Flex IFrame
在flex组件中嵌入html代码,可以利用flex iframe.这个在很多时候会用到的,有时候flex必须得这样做,如果你不这样做还真不行…… flex而且可以和html进行JavaScript交互 ...
- Android内存泄漏分析实战
内存泄漏简单介绍 java能够保证当没有引用指向对象的时候,对象会被垃圾回收器回收.与c语言自己申请的内存自己释放相比,java程序猿轻松了非常多.可是并不代表java程序猿不用操心内存泄漏.当jav ...
- openerp创建动态视图-fields_view_get
openerp的视图结构是以XML的格式存放于ir.ui.view表中,属于静态格式,设计之后就固定, 但可以通过在model中重写fields_view_get函数,在视图加载时修改arch属性,动 ...
- ip段/数字,如192.168.0.1/24的意思是什么?(转)
ip段/数字,如192.168.0.1/24的意思是什么? 踩踩 0作者:Admin 发表日期:2013-10-31 复制链接 收藏 首先来了解一下二进制的转换知识: 二进制数转换成十进制数 二进制的 ...
- MySQL比较两个表不同的数据
在本教程中,您将学习如何比较两个表以找到不匹配的记录. 在数据迁移中,我们经常需要比较两个表,以便在一个表中标识另一个表中没有相应记录的记录. 例如,我们有一个新的数据库,其架构与旧数据库不同.我们的 ...
- 【LeetCode】101. Symmetric Tree (2 solutions)
Symmetric Tree Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its ...
- XHTML学习书籍
http://baike.baidu.com/view/15906.htm XHTML学习书籍 可扩展超文本置标语言(eXtensible HyperText Markup Language,XH ...