手机
当前位置:查字典教程网 >编程开发 >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的取值】相关文章:

JQuery控制Radio选中方法分析

javascript实现树形菜单的方法

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

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

js控制div弹出层实现方法

jQuery计算文本框字数及限制文本框字数的方法

JavaScript中的Math.LOG2E属性使用详解

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

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

JS控制表格隔行变色

精品推荐
分类导航