獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft （For:
2024-09-06 12:44:08
供稿：網友
問題：
如何取到頁面中任意某個Html元素與body元素之間的偏移距離？
offsetTop和offsetLeft 這兩個屬性,IE 、Opera和Firefox對它倆的解釋存在差異：
IE5.0+ 、Opera8.0+： offsetTop和offsetLeft 都是相對父級元素
Firefox1.06： offsetTop和offsetLeft 都是相對于body元素
因此：
（1）在FF下直接使用offsetTop和offsetLeft，就可以取到頁面中任意某個Html元素與body元素之間的偏移距離；
（2）在IE、Opera下則比較麻煩：
需要首先取到該Html元素與body元素之間所有Html元素，計算各自的offsetTop和offsetLeft，然后再累加。
即：從該Html元素開始，遍歷至body，在遍歷的過程中，如果某個HTML元素的CSS設置了borderWidth的話，則borderWidth不是算在offsetTop和offsetLeft內的－－因此在遍歷的過程中，還需要累加上：
obj.currentStyle.borderLeftWidth、obj.currentStyle.borderTopWidth
下面這段測試代碼已經解決上述問題，兼容IE5、FF1，但在Opera8下無效
實例代碼：
<!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" lang="gb2312">
<head>
<head>
<title> 代碼實例：獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="楓巖,CNLei.y.l@gmail.com">
<style type="text/css" media="all">
body,p {margin:0;padding:0;font-size:12px;}
body {float:left;width:100%;}
ul,ul li {margin:0;padding:0;list-style:none;padding:0;}
ul li input {border:1px solid #ccc;}
#Bd {
background:#FFE8D9;
float:left;
padding:20px;
border:10px solid #f90;/*該值在IE下還是取不到*/
width:100%;
}
#BS {
padding:20px;
float:left;
background:#58CB64;
}
#BS ul {border:20px solid #DDF1D8;}
#BM {
margin-top:100px;
float:right;
width:300px;
background:#fff;
}
</style>
<script type="text/javascript">
var w3c=(document.getElementById)? true:false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var ie5=(w3c && ie)? true : false;
var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;
var op8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)? false:true;
function Obj(o){
return document.getElementById(o)?document.getElementById(o):o;
