JAVASCRIPT style 中visibility和display之间的区别

2024-12-02 09:27:31

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
---------------------------------------------------------------
例子：

代码如下:

解释：注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。
---------------------------------------------------------------
另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。
将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。
--------------------------------------------------------------
例子：

代码如下:

---------------------------------------------------------------
最后是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>

《太难了》：
同时，关于display:inline;和float:left;两者的区别可以参看该篇文章：
（display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:left，是针对块级元素的浮动形式，是不同形式的两种状态。）http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>float &inline</title>
<style>
*{text-align:center;padding:4px;}
div,p{text-align:left;}
span{/*float:right;*/ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;}
ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;}
ul#float li{ float:left;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; }
</style>
</head>
<body>
<span style="width:300px;">span为内联/inline元素，给他宽度赋值是没有效果的。</span>
<span style="width:100px; float:right;">span为内联/inline元素，给他宽度赋值100px+float:right;可以看到有了宽度。</span>
<div>
<p>这个li被定义为内联/inline,设置宽度没有效果</p>
<ul id="inline">
<li>test</li>
<li>test</li>
</ul>
</div>
<div>
<p>这个li被定义为内联/inline+float:left,设置宽度有效果</p>
<ul id="float">
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
</html>

JAVASCRIPT style 中visibility和display之间的区别

当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置. --------------------------------------------------------------- 例子: 复制代码代码如下: <script language="JavaScript"> function toggleVisibility(me){ if (me.style.visibility=="hidde
JavaScript变量中var,let和const的区别

目录前言 ES5与ES6的区别 1. 作用域 2. 全局属性 3. 变量提升与暂时性死区 4. 重复声明 let与const的区别 1. 常量最佳实践前言 JavaScript中一共有3种用来声明变量的关键字,分别是var.let和const. 其中var关键字是ES5时代的产物,由于ES5对变量的约束很宽松,使用var来声明变量时经常会出现一些预料之外的问题. ES6为了使变量的定义更加规范,提出了let和const这两个关键字. 因此要解释清楚这三个的区别,首先要从ES5时代和ES6时
总结JavaScript三种数据存储方式之间的区别

sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存
JS中typeof与instanceof之间的区别总结

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="un
javascript的var与let,const之间的区别详解

目录作为全局变量时变量提升暂时性死区块级作用域重复声明修改声明的变量(常量与变量声明) 总结说到JavaScript中声明变量的几种方法也就是var.let.const了,let和const是es6中新增的命令.那么它们之间有什么区别呢? 我们先整体说一下三者的区别,在详细介绍,var.let.const的区别主要从以下几点分析: 作为全局变量时的不同变量提升暂时性死区块级作用域重复声明修改声明的变量作为全局变量时在ES5中,顶层对象的属性和全局变量是等价的,用var
探讨Ajax中同步与异步之间的区别

请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用window.location.search获得).参数可以用encodeURIComponent进行编码,使用方式: var EnParam = encodeURIComponent(param); URL只支持大约2K的长度,即2048字符数:使用GET进行AJAX请求时候会缓存导致出现的页面不是正确的,一般方法加random参数值:aja
JavaScript函数节流和函数防抖之间的区别

一.概念解释函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的.反而形成一种视觉效果,就是一张图.就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样. 同理,可以类推到js代码.在一定时间内,代码执行的次数不一定要非常多.达到一定频率就足够了.因为跑得越多,带来的效果也是一样.倒不如,把js代码的执行次数控制在合理的范围.既
.net中as和is之间的区别分析

1.as 用于在兼容的引用类型之间执行转换,as 运算符类似于强制转换操作:但是,如果转换不可行,as 会返回 null 而不是引发异常.更严格地说,这种形式的表达式:expression as type,等效于expression is type ? (type)expression : (type)null,只是 expression 只被计算一次.注意,as 运算符只执行引用转换和装箱转换.as 运算符无法执行其他转换,如用户定义的转换,这类转换应使用 cast 表达式来执行 as操作符不
C++中Overload,Override,Hide之间的区别

一. 简介•Overload: 重载,指函数同名,但是参数个数不同.或者参数类型不同的多个实现.(如果参数相同但是仅仅返回值不同不是重载,编译器会报错.) 编译器判断重载函数:•第一步,是确定该调用中所考虑的重载函数的集合,该函数集合被称为候选函数(candidant function).所谓候选函数就是与被调用函数同名的函数. •第二步,分为两动作:第一个动作是编译器从第一步选出的候选函数中调出可行函数(viable function).可行函数的函数参数个数与调用的函数参数个数相同,或者可行
Javascript表达式中连续的 && 和 || 之赋值区别

代码如下: 复制代码代码如下: function write(msg){ for(var i = 0; i < arguments.length; i ++){ document.write(arguments[i] + '<br />'); } } //关于 '&&' test1 = 1 && 2 && 3 && 4; test2 = '0' && 2 && 3 && 4;

JAVASCRIPT style 中visibility和display之间的区别

相关推荐

随机推荐