在IE下：float屬性會(huì)影響offsetTop的取值
更新時(shí)間：2006年12月22日 00:00:00 作者：
因需要定位某個(gè)HTML元素（例如:div）距離頁頂?shù)母叨龋胗胦ffsetTop來取值，結(jié)果卻發(fā)現(xiàn)CSS中如果使用了float:left;之類的寫法后，竟然會(huì)導(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對(duì)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);">點(diǎn)擊此處試試</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對(duì)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);">點(diǎn)擊此處試試</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對(duì)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);">點(diǎn)擊此處試試</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對(duì)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);">點(diǎn)擊此處試試</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)文章
JavaScript+CSS無限極分類效果完整實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript+CSS無限極分類效果完整實(shí)現(xiàn)方法,涉及JavaScript針對(duì)頁面元素節(jié)點(diǎn)遍歷與動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-12-12
微信小程序?qū)崿F(xiàn)歷史搜索功能的全過程(h5同理)
最近在使用微信小程序開發(fā)的時(shí)候遇到了一個(gè)需求,需要實(shí)現(xiàn)歷史搜索記錄的功能,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)歷史搜索功能(h5同理)的相關(guān)資料,需要的朋友可以參考下2022-12-12
BootStrap實(shí)現(xiàn)文件上傳并帶有進(jìn)度條效果
這篇文章主要介紹了BootStrap實(shí)現(xiàn)文件上傳并帶有進(jìn)度條效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-09-09
BootStrap Fileinput初始化時(shí)的一些參數(shù)
本文通過一個(gè)例子給大家簡單介紹了bootstrap fileinput初始化時(shí)的一些參數(shù)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
BootStrap Progressbar 實(shí)現(xiàn)大文件上傳的進(jìn)度條的實(shí)例代碼
這篇文章主要介紹了BootStrap Progressbar 實(shí)現(xiàn)大文件上傳的進(jìn)度條的實(shí)例代碼的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript中子函數(shù)訪問外部變量的3種解決方法
任何在函數(shù)中定義的變量,都可認(rèn)為是私有變量,因?yàn)椴荒茉诤瘮?shù)外部訪問這些變量,這篇文章主要給大家介紹了關(guān)于JavaScript中子函數(shù)訪問外部變量的3種解決方法,需要的朋友可以參考下2021-06-06
用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)
用JS實(shí)現(xiàn)網(wǎng)頁元素陰影效果的研究總結(jié)...2007-08-08
繼承是面向?qū)ο缶幊讨械囊粋€(gè)重要概念,它允許一個(gè)對(duì)象（子類或派生類）獲取另一個(gè)對(duì)象（父類或基類）的屬性和方法,在 JavaScript 中,有多種方式可以實(shí)現(xiàn)繼承,本文將給大家介紹六種常見的JavaScript繼承方法,需要的朋友可以參考下2023-09-09
本篇文章主要對(duì)javascript獲取url信息的常見方法進(jìn)行介紹，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了微信小程序 wepy框架與iview-weapp的用法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04