因需要定位某个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详解
★ JavaScript中的Math.SQRT1_2属性使用简介
★ JavaScript正则表达式之multiline属性的应用
★ JavaScript正则表达式中的global属性的使用
★ Javascript中prototype属性实现给内置对象添加新的方法