Get the offset distance between any Html element and the body offsetTop, offsetLeft (For:IE5＋FF1) [_javascript skills

Question:
How to get the offset distance between any Html element and the body element in the page?

offsetTop and offsetLeft, IE, Opera and Firefox have different interpretations of these two attributes:
IE5.0, Opera8.0: offsetTop and offsetLeft are both relative parent elements
Firefox1.06: offsetTop and offsetLeft are both relative to the body element

Therefore:
(1) Using offsetTop and offsetLeft directly under FF, you can get any Html element and body element in the page offset distance between each other;
(2) It is more troublesome under IE and Opera:
You need to first get all the Html elements between the Html element and the body element, calculate their respective offsetTop and offsetLeft, and then Add up.
That is: starting from the Html element, traversing to the body. During the traversal process, if the CSS of an HTML element sets borderWidth, the borderWidth is not included in offsetTop and offsetLeft - therefore during the traversal process , you need to add:
obj.currentStyle.borderLeftWidth, obj.currentStyle.borderTopWidth

The following test code has solved the above problem and is compatible with IE5 and FF1, but is invalid under Opera8

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

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;/*This value still cannot be obtained under 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;
}




This color Block Height: 100px;

Test

Test

Test

Test

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