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

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

WBOY
WBOYOriginal
2016-05-16 19:22:401483Durchsuche

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



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


此色块高:100px;













测试


测试


测试


测试


测试






Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn