获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[


答案：问题： 
如何取到页面中任意某个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; 
} 

function GetXYWH(o){ 
var nLt=0; 
var nTp=0; 
 var offsetParent = o; 
 while (offsetParent!=null && offsetParent!=document.body) { 
 nLt+=offsetParent.offsetLeft; 
 nTp+=offsetParent.offsetTop; 
 if(!ns6){ 
 parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):""; 
 parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTp+=parseInt(offsetParent.currentStyle.borderTopWidth):""; 
 } 
 offsetParent=offsetParent.offsetParent; 
 //alert(offsetParent.tagName); 
 } 
alert("ID:"+o.id+"\n\nL:"+nLt+" T:"+nTp+"\nW:"+o.offsetWidth+" H:"+o.offsetHeight); 
} 
</script> 
</head> 
<body> 
<p style="height:100px;margin:0;padding:0;background:#00f;color:#fff;line-height:100px;text-align:center;">此色块高：100px;</p> 
<div id="Bd"> 
<div id="BS"> 
<ul> 
<li><input type="text" value="无法取到橙黄色的边框线宽度(border:10px solid #f90;)" onclick="GetXYWH(this);" size="60" /></li> 
<li><input type="text" value="GetXYWH(this);" onclick="GetXYWH(this);" size="60" /></li> 
<li><input type="text" value="GetXYWH(this);" onclick="GetXYWH(this);" size="60" /></li> 
<li><input type="text" value="GetXYWH(this);" onclick="GetXYWH(this);" size="60" /></li> 
<li><input type="text" value="GetXYWH(Obj('BM'));" onclick="GetXYWH(Obj('BM'));" size="60" /></li> 
</ul> 
</div><!--BS--> 
<div id="BM" onclick="GetXYWH(this);"> 
<p>测试</p> 
<p>测试</p> 
<p>测试</p> 
<p>测试</p> 
<p>测试</p> 
</div><!--BM--> 
</div> 
</body> 
</html>
上一个：Javascript实例教程(19) 使用HoTMetal(5)
下一个：Javascript直接定义对象实例[
更多图片编程知识: