在IE下:float屬性會影響offsetTop的取值
更新時間:2006年12月22日 00:00:00 作者:
因需要定位某個HTML元素(例如:div)距離頁頂?shù)母叨?,想用offsetTop來取值,結(jié)果卻發(fā)現(xiàn)CSS中如果使用了float:left;之類的寫法后,竟然會導(dǎo)致取到的值不一樣。
沒有使用float:left;取的到值是正常值200;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float對offsetTop的影響</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="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>
<script type="text/javascript">
<!--
function ShowIt(o) {
alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;} 沒有使用float屬性,取到的offsetTop的值正常:200。</div>
<div id="Main">
<div id="IECN" onclick="ShowIt(this);">點擊此處試試</div>
</div>
</body>
</html>
使用了float:left;后,取的值卻變成了100,平白無故的少了100
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float對offsetTop的影響</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="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>
<script type="text/javascript">
<!--
function ShowIt(o) {
alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;float:left;} 使用了float屬性,取到的offsetTop的值只有100了,無故少了100。</div>
<div id="Main">
<div id="IECN" onclick="ShowIt(this);">點擊此處試試</div>
</div>
</body>
</html>
沒有使用float:left;取的到值是正常值200;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float對offsetTop的影響</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="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>
<script type="text/javascript">
<!--
function ShowIt(o) {
alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;} 沒有使用float屬性,取到的offsetTop的值正常:200。</div>
<div id="Main">
<div id="IECN" onclick="ShowIt(this);">點擊此處試試</div>
</div>
</body>
</html>
使用了float:left;后,取的值卻變成了100,平白無故的少了100
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float對offsetTop的影響</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Copyright" content="(c)" />
<meta name="Author" content="CNLei" />
<style type="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>
<script type="text/javascript">
<!--
function ShowIt(o) {
alert(o.offsetTop);
}
-->
</script>
</head>
<body>
<div id="Top">#Main {padding:100px;float:left;} 使用了float屬性,取到的offsetTop的值只有100了,無故少了100。</div>
<div id="Main">
<div id="IECN" onclick="ShowIt(this);">點擊此處試試</div>
</div>
</body>
</html>
您可能感興趣的文章:
- 簡單談?wù)刼ffsetleft、offsetTop和offsetParent
- JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記
- 獲取offsetTop和offsetLeft值的js代碼(兼容)
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細(xì)說明版
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft (For:IE5+ FF1 )[
- top、clientTop、scrollTop、offsetTop
- offsetTop用法詳解
相關(guān)文章
使用ThinkJs搭建微信中控服務(wù)的實現(xiàn)方法
這篇文章主要介紹了使用ThinkJs搭建微信中控服務(wù)的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08淺析JavaScript函數(shù)的調(diào)用模式
這篇文章主要為大家詳細(xì)介紹了JavaScript函數(shù)的調(diào)用模式,包括方法調(diào)用模式,構(gòu)造器調(diào)用模式,apply/call調(diào)用模式,感興趣的小伙伴們可以參考一下2016-08-08詳談js中標(biāo)準(zhǔn)for循環(huán)與foreach(for in)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中標(biāo)準(zhǔn)for循環(huán)與foreach(for in)的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11