一个设置为display:none;的div,在用.height()方法获取不到它的高,获取到的高度为0.
<div style="width:100px;height:100px;background:red;visibility:hidden"></div>
//对象隐藏后,还有占有相应的空间大小
<div style="width:100px;height:100px;background:red;display:none"></div>
//对象隐藏后,对象不占任何空间 CSS中的visibility和display两个属性很容易被混淆,因为它们看起来是做同样的事情,但实际上,这两个属性是完全不同的。
visibility属性用来设置一个给定的元素是否显示(visibility="visible|hidden"),但是,虽然一个元素的visibility被设置为hidden,但是该元素仍然会占据设计的位置:hidden仅仅是隐藏, 但是他的位置会保留 注意如果display属性没有被明确设置,将默认被设置为该类元素的常用值。
明显地,两个属性中display属性更有用,多数情况下在隐藏文字的时候要将相关的元素做相应的调节(例如树结构)。none表示完全没有, 当前的位置会被后面的元素补上来
使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到)。 <script language="JavaScript">
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">
一个设置为display:none;的div,在用.height()方法获取不到它的高,获取到的高度为0.的更多相关文章
- JavaScript动态设置div的样式的方法
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- 元素设置为display:none,其绑定的事件仍存在
元素设置为display:none,虽然该元素从页面中消失了,其绑定的事件仍存在. <body> <button class="button1">chang ...
- overflow-x和overflow-y其中一个设置为visible时的奇怪现象
当overflow-x和overflow-y其中一个设置为visible时,如果另一个不是visible,那么它会被自动重置为auto 看看效果先: 第一次遇到这个问题时,我还以为是chrome的一个 ...
- css中设置div垂直水平居中的方法
设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...
- 若块级元素被设置为 display: table-cell 便无法设置宽度
工作中,遇到表格的单元格中的 div 设置宽度无效,后来是发现 div 被设置为 display: table-cell ,后将其修改为 display: block 则设置的宽度生效.
- jQuery加载一个html页面到指定的div里
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- 一个设置 material design icon的插件工具
一个设置 material design icon的插件工具 github地址:https://github.com/konifar/android-material-design-icon-gene ...
- 子div块中设置margin-top时影响父div块位置的解决办法
在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...
随机推荐
- 洛谷P3938 斐波那契
题目戳 题目描述 小 C 养了一些很可爱的兔子. 有一天,小 C 突然发现兔子们都是严格按照伟大的数学家斐波那契提出的模型来进行 繁衍:一对兔子从出生后第二个月起,每个月刚开始的时候都会产下一对小兔子 ...
- [BZOJ1503][NOI2004]郁闷的出纳员 无旋Treap
1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec Memory Limit: 64 MB Description OIER公司是一家大型专业化软件公司,有着数以万计的员 ...
- EVE-NG硬盘扩容,存储海量镜像
EVE-NG硬盘扩容,存储海量镜像 来源 http://blog.51cto.com/sms1107/1928453 一.查看当前磁盘使用情况 /dev/mapper/eve--ng--vg-root ...
- 3.3 无连接运输:UDP
3.3 无连接运输:UDP 简介: UDP提供不可靠的服务,它只做了运输层能做的最少工作,除了分解/复用以及少量的差错检测之外,几乎对IP没增加什么东西. 为什么应用开发人员宁愿再UDP之上构建应用, ...
- 3.5 面向连接的运输:TCP
3.5 面向连接的运输:TCP 3.5.1 TCP连接 TCP进行传输之间要进行三次握手建立连接,这个连接不是物理意义上的有一根电线连接,而是应用端两个应用,在逻辑上是已经建立连接了. TCP 不需 ...
- 【比赛】HNOI2018 总结
一将功成万骨枯,我就是给那些队爷做基数的 一.比赛过程 Day1 看完题,暴力好打,然后就打 觉得第三题模型很好建啊,先看第三题吧(结果第三题是最..的) 图建出来,先看树的情况,设dp试一下 结果一 ...
- 【agc004F】Namori
Portal -->agc004F Solution 好神仙的转化qwq 首先我们可以先考虑\(m=n-1\)的情况下,也就是树的情况下要怎么做 我们可以将这个问题转化一下:我们对这颗 ...
- 《JavaScript高级程序设计(第三版)》-2
变量 ECMAScript变量是松散类型的,即可以保存任何类型的数据. 初始化变量不会把它标记类型,初始化的过程只是给变量付一个值,因此可以在修改变量的同时修改值的类型.但并不推荐这样做. var m ...
- winform布局 FlowLayoutPanel的控件
http://www.cnblogs.com/moon-mountain/archive/2011/09/08/2171232.html 1.采用流布局:工具箱里边容器里有一个:FlowLayoutP ...
- bzoj 1588 平衡树 splay
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 15446 Solved: 6076[Submit][Sta ...