手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >在IE下:float属性会影响offsetTop的取值
在IE下:float属性会影响offsetTop的取值
摘要:因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之...

因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样。

没有使用float:left;取的到值是正常值200;

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Float对offsetTop的影响</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metaname="Copyright"content="(c)"/>

<metaname="Author"content="CNLei"/>

<styletype="text/css"media="all">

body{margin:0;padding:0;}

#Top{height:100px;}

#Main{padding:100px;}

#IECN{width:200px;height:50px;background:#f00;color:#fff;}

</style>

<scripttype="text/javascript">

<>

</script>

</head>

<body>

<divid="Top">#Main{padding:100px;}没有使用float属性,取到的offsetTop的值正常:200。</div>

<divid="Main">

<divid="IECN"onclick="ShowIt(this);">点击此处试试</div>

</div>

</body>

</html>

使用了float:left;后,取的值却变成了100,平白无故的少了100

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Float对offsetTop的影响</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metaname="Copyright"content="(c)"/>

<metaname="Author"content="CNLei"/>

<styletype="text/css"media="all">

body{margin:0;padding:0;}

#Top{height:100px;}

#Main{padding:100px;float:left}

#IECN{width:200px;height:50px;background:#f00;color:#fff;}

</style>

<scripttype="text/javascript">

<>

</script>

</head>

<body>

<divid="Top">#Main{padding:100px;float:left;}使用了float属性,取到的offsetTop的值只有100了,无故少了100。</div>

<divid="Main">

<divid="IECN"onclick="ShowIt(this);">点击此处试试</div>

</div>

</body>

</html>

【在IE下:float属性会影响offsetTop的取值】相关文章:

父窗口获取弹出子窗口文本框的值

JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

JS获取当前脚本文件的绝对路径

JavaScript中的Math.SQRT1_2属性使用简介

JavaScript正则表达式之multiline属性的应用

JavaScript中length属性的使用方法

JavaScript正则表达式中的global属性的使用

让广告代码不再影响你的网页加载速度

Javascript中prototype属性实现给内置对象添加新的方法

经典的带阴影的可拖动的浮动层

精品推荐
分类导航