获取任意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="枫岩,[email protected]">

<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>

相关推荐