一个设置为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">
时间: 2024-09-30 11:28:11

一个设置为display:none;的div,在用.height()方法获取不到它的高,获取到的高度为0.的相关文章

问题:关于坛友的一个定时重复显示和隐藏div的实现

需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> 2: <html> 3: <head> 4: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5: <title>Test</title

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

子div块中设置margin-top时影响父div块位置的解决办法

在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办法1: 若子div块中使用margin-top,则在父div块中添加:overflow:hidden; 解决办法2: 若由于特殊情况不能在父div块中添加:overflow:hidden,那么在子div块中用padding-top代替margin-top;

【转】 c#中两个DateTimePicker,一个时间设置为0:0:0,另一个设置为23:59:59

[转] c#中两个DateTimePicker,一个时间设置为0:0:0,另一个设置为23:59:59 stp1为第一个DateTimePicker this.dtp1.Value=this.dtp1.Value.Date; stp2为第二个DateTimePicker 设置dtp2的值的时间部分是23:59:59. this.dtp2.Value = new DateTime(this.dtp2.Value.Year, this.dtp2.Value.Month, this.dtp2.Valu

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8&q

子元素设置浮动样式,父元素高度为0

子元素如果设置了浮动样式,那么它就会脱离文档流,从而导致父元素高度变成0,当然不能说这是一个Bug,float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局,所以只能说这种情况只能是由于浮动样式的特性决定的. 测试用例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

浮动子div撑开父div的几种方法、给select赋值、zoom样式的含义、实现select下拉框readonly

1.浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动 (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素float:left:,这样设置的坏处是不能用margin:auto:实现居中 (4)设置父元素display:inline-block;,这样设置的坏处是不能

让图片在div 中居中的方法

方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt.gif" width="150" height="100" /> </div> CSS样式如下: div {width:300px; height:150px; background-color:#CCC; border:#000 1px

[转]CSS网页布局:div水平居中的各种方法

http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一.margin:auto 0 与 text-aligh:center 上面这段代码的意思是说使wrap这个div到左右两侧的