在IE下：float屬性會影響offsetTop的取值
更新時間：2006年12月22日 00:00:00 作者：
因需要定位某個HTML元素（例如:div）距離頁頂?shù)母叨?，想用offsetTop來取值，結(jié)果卻發(fā)現(xiàn)CSS中如果使用了float:left;之類的寫法后，竟然會導致取到的值不一樣。
沒有使用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>
您可能感興趣的文章:
- 簡單談談offsetleft、offsetTop和offsetParent
- JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學習筆記
- 獲取offsetTop和offsetLeft值的js代碼(兼容)
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細說明版
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
- top、clientTop、scrollTop、offsetTop
- offsetTop用法詳解
相關文章
JavaScript+CSS無限極分類效果完整實現(xiàn)方法
這篇文章主要介紹了JavaScript+CSS無限極分類效果完整實現(xiàn)方法,涉及JavaScript針對頁面元素節(jié)點遍歷與動態(tài)操作技巧,需要的朋友可以參考下2015-12-12
微信小程序?qū)崿F(xiàn)歷史搜索功能的全過程(h5同理)
最近在使用微信小程序開發(fā)的時候遇到了一個需求,需要實現(xiàn)歷史搜索記錄的功能,所以下面這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)歷史搜索功能(h5同理)的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了BootStrap實現(xiàn)文件上傳并帶有進度條效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-09-09
BootStrap Fileinput初始化時的一些參數(shù)
本文通過一個例子給大家簡單介紹了bootstrap fileinput初始化時的一些參數(shù)，非常不錯，具有參考借鑒價值，需要的朋友參考下2016-12-12
BootStrap Progressbar 實現(xiàn)大文件上傳的進度條的實例代碼
這篇文章主要介紹了BootStrap Progressbar 實現(xiàn)大文件上傳的進度條的實例代碼的相關資料，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JavaScript中子函數(shù)訪問外部變量的3種解決方法
任何在函數(shù)中定義的變量,都可認為是私有變量,因為不能在函數(shù)外部訪問這些變量,這篇文章主要給大家介紹了關于JavaScript中子函數(shù)訪問外部變量的3種解決方法,需要的朋友可以參考下2021-06-06
用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)
用JS實現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)...2007-08-08
繼承是面向?qū)ο缶幊讨械囊粋€重要概念,它允許一個對象（子類或派生類）獲取另一個對象（父類或基類）的屬性和方法,在 JavaScript 中,有多種方式可以實現(xiàn)繼承,本文將給大家介紹六種常見的JavaScript繼承方法,需要的朋友可以參考下2023-09-09
本篇文章主要對javascript獲取url信息的常見方法進行介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了微信小程序 wepy框架與iview-weapp的用法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04