获取任意Html元素与body之间的偏移距离 offsetTop、

      2020-08-02 15:05      编程语言
问题:
如何取到页面中任意某个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>
<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+"\n\nL:"+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>
<li><inputtype="text"value="无法取到橙黄色的边框线宽度(border:10pxsolid#f90;)"onclick="GetXYWH(this);"size="60"/></li>
<li><inputtype="text"value="GetXYWH(this);"onclick="GetXYWH(this);"size="60"/></li>
<li><inputtype="text"value="GetXYWH(this);"onclick="GetXYWH(this);"size="60"/></li>
<li><inputtype="text"value="GetXYWH(this);"onclick="GetXYWH(this);"size="60"/></li>
<li><inputtype="text"value="GetXYWH(Obj('BM'));"onclick="GetXYWH(Obj('BM'));"size="60"/></li>
</ul>
</div><!--BS-->
<divid="BM"onclick="GetXYWH(this);">
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</div><!--BM-->
</div>
</body>
</html>