Home > Developer > JavaScript
Problem:
How can I get the offset distance between any Html element and the body element on the page?
The offsetTop and offsetLeft attributes have different interpretations for IE, Opera, and Firefox:
IE5.0 +, Opera8.0 +: offsetTop, and offsetLeft are relative parent elements.
Firefox1.06: Both offsetTop and offsetLeft are relative to the body element.
Therefore:
(1) Use offsetTop and offsetLeft directly under FF to get the offset distance between any Html element and body element on the page;
(2) It is troublesome in IE and Opera:
You must first obtain all the Html elements between the Html element and the body element, calculate their offsetTop and offsetLeft, and then accumulate them.
That is, from the Html element to the body, if borderWidth is set for the CSS of an HTML element during the traversal process, then borderWidth is not included in offsetTop and offsetLeft -- therefore, in the traversal process, you need to add the following:
Obj. currentStyle. borderLeftWidth, obj. currentStyle. borderTopWidth
The following test code is compatible with IE5 and FF1 but is invalid in Opera8.
Instance code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<Head>
<Head>
<Title> code example: obtains the offsetTop and offsetLeft offsets between any Html element and the body. </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Meta name = "author" content = "fengyan, 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;/* This value 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;
}
</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 = (w3c & ie )? True: false;
Var ns6 = (w3c & (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>
</Head>
<Body>
<P style = "height: 100px; margin: 0; padding: 0; background: # 00f; color: # fff; line-height: 100px; text-align: center; "> The Color Block height is 100px. </p>
<Div id = "Bd">
<Div id = "BS">
<Ul>
<Li> <input type = "text" value = "cannot obtain 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 = "60"/> </li>
<Li> <input type = "text" value = "GetXYWH (this);" onclick = "GetXYWH (this);" size = "60"/> </li>
<Li> <input type = "text" value = "GetXYWH (this);" onclick = "GetXYWH (this);" size = "60"/> </li>
<Li> <input type = "text" value = "GetXYWH (Obj ('bm ');" onclick = "GetXYWH (Obj ('bm ')); "size =" 60 "/> </li>
</Ul>
</Div> <! -- BS -->
<Div id = "BM" onclick = "GetXYWH (this);">
<P> test </p>
<P> test </p>
<P> test </p>
<P> test </p>
<P> test </p>
</Div> <! -- BM -->
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
