Problem:
How do I get to the offset distance between any HTML element and the BODY element in the page?
The two attributes of offsettop and Offsetleft, IE, opera and Firefox, differ in their interpretation:
ie5.0+, opera8.0+: offsettop and offsetleft are relative parent elements
Firefox1.06:offsettop and offsetleft are all relative to the BODY element.
So:
(1) directly using offsettop and offsetleft under FF, you can take the offset distance between any HTML element and the BODY element in the page;
(2) in IE, opera under the more trouble:
You need to first take all the HTML elements between the HTML element and the BODY element, compute the respective offsettop and offsetleft, and then add it up.
That is: Starting from the HTML element, traversing to the body, in the process of traversal, if an HTML element of CSS set BorderWidth, then borderwidth is not counted in offsettop and offsetleft-so in the process of traversal, Also need to add up:
Obj.currentStyle.borderLeftWidth, Obj.currentStyle.borderTopWidth
The following test code has resolved the above issues, compatible with IE5, FF1, but not under Opera8
Instance code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> code instance: Gets the offset distance between the arbitrary HTML element and the body offsettop, offsetleft </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta name= "Author" content= "Maple Rock, CNLei.y.l@gmail.com" >
<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/* The value is not in IE or not.
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= (&& IE)? True:false;
var ns6= (&& (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>
<body>
<p style= "height:100px;margin:0;padding:0;background: #00f; color: #fff; line-height:100px;text-align:center;" > This color block high:100px;</p>
<div id= "Bd" >
<div id= "BS" >
<ul>
<li><input type= "text" value= "cannot take the orange border line width (border:10px solid #f90;)" onclick= "getxywh (this);" size= "60"/ ></li>
<li><input type= "text" value= "GETXYWH (This)," onclick= "getxywh (this);" Size= "/></li>
<li><input type= "text" value= "GETXYWH (This)," onclick= "getxywh (this);" Size= "/></li>
<li><input type= "text" value= "GETXYWH (This)," onclick= "getxywh (this);" Size= "/></li>
<li><input type= "text" value= "Getxywh (obj (' BM ')" onclick= "Getxywh" (obj (' BM ')); "Size="/></li >
</ul>
</div><!--bs-->
<div id= "BM" onclick= "GETXYWH (this);" >
<p> Testing </p>
<p> Testing </p>
<p> Testing </p>
<p> Testing </p>
<p> Testing </p>
</div><!--bm-->
</div>
</body>
