首页  >  文章  >  web前端  >  获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[_javascript技巧

获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[_javascript技巧

WBOY
WBOY原创
2016-05-16 19:22:401463浏览

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

实例代码:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



 代码实例:获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft 


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;
  • }


  • 此色块高:100px;













<script> <BR>var w3c=(document.getElementById)? true:false; <BR>var agt=navigator.userAgent.toLowerCase(); <BR>var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1)); <BR>var ie5=(w3c && ie)? true : false; <BR>var ns6=(w3c && (navigator.appName=="Netscape"))? true: false; <BR>var op8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)? false:true; <br><br>function Obj(o){ <BR> return document.getElementById(o)?document.getElementById(o):o; <BR>} <br><br>function GetXYWH(o){ <BR>var nLt=0; <BR>var nTp=0; <BR> var offsetParent = o; <BR> while (offsetParent!=null && offsetParent!=document.body) { <BR> nLt+=offsetParent.offsetLeft; <BR> nTp+=offsetParent.offsetTop; <BR> if(!ns6){ <BR> parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):""; <BR> parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTp+=parseInt(offsetParent.currentStyle.borderTopWidth):""; <BR> } <BR> offsetParent=offsetParent.offsetParent; <BR> //alert(offsetParent.tagName); <BR> } <BR>alert("ID:"+o.id+"\n\nL:"+nLt+" T:"+nTp+"\nW:"+o.offsetWidth+" H:"+o.offsetHeight); <BR>} <BR></script>测试 测试 测试 测试 测试
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn