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

摘要：问题：如何取到页面中任意某个Html元素与body元素之间的偏移距离？offsetTop和offsetLeft这两个属性,IE、Opera和...

问题：

如何取到页面中任意某个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下无效

实例代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">

<head>

<title>代码实例：获取任意Html元素与body之间的偏移距离offsetTop、offsetLeft</title>

<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>

<metaname="author"content="枫岩,CNLei.y.l@gmail.com">

<styletype="text/css"media="all">

body,p{margin:0;padding:0;font-size:12px;}

body{float:left;width:100%;}

ul,ulli{margin:0;padding:0;list-style:none;padding:0;}

ulliinput{border:1pxsolid#ccc;}

#Bd{

background:#FFE8D9;

float:left;

padding:20px;

border:10pxsolid#f90;/*该值在IE下还是取不到*/

width:100%;

}

#BS{

padding:20px;

float:left;

background:#58CB64;

}

#BSul{border:20pxsolid#DDF1D8;}

#BM{

margin-top:100px;

float:right;

width:300px;

background:#fff;

}

</style>

<scripttype="text/javascript">

varw3c=(document.getElementById)?true:false;

varagt=navigator.userAgent.toLowerCase();

varie=((agt.indexOf("msie")!=-1)&&(agt.indexOf("opera")==-1)&&(agt.indexOf("omniweb")==-1));

varie5=(w3c&&ie)?true:false;

varns6=(w3c&&(navigator.appName=="Netscape"))?true:false;

varop8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)?false:true;

functionObj(o){

returndocument.getElementById(o)?document.getElementById(o):o;

}

functionGetXYWH(o){

varnLt=0;

varnTp=0;

varoffsetParent=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+"nnL:"+nLt+"T:"+nTp+"nW:"+o.offsetWidth+"H:"+o.offsetHeight);

}

</script>

</head>

<body>

<pstyle="height:100px;margin:0;padding:0;background:#00f;color:#fff;line-height:100px;text-align:center;">此色块高：100px;</p>

<divid="Bd">

<divid="BS">

<ul>

</ul>

</div><>

<divid="BM"onclick="GetXYWH(this);">

</div><>

</div>

</body>

</html>