Home > Developer > JavaScript
The offsetParent attribute returns an object reference. This object is closest to the element that calls offsetParent (the closest to the contained level) and is a container element that has been positioned by CSS. If the container element is not CSS located, the offsetParent attribute is referenced by the root element (in standard compatibility mode, html element, and body element in weird rendering mode. When the style. display of the container element is set to "none" (except for IE and Opera), The offsetParent attribute returns null.
Syntax:
ParentObj = element. offsetParent
Variable:
· ParentObj is an element reference. The offset of the current element is calculated.
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Untitled Document </title>
<Script type = "text/javascript" language = "JavaScript">
Function offset_init (){
Var pElement = document. getElementById ("sonObj ");
ParentObj = pElement. offsetParent;
Alert (parentObj. tagName );
}
</Script>
</Head>
<Body onload = "offset_init ()">
<Div id = "parent">
<P id = "sonObj"> test the OffsetParent attribute </p>
</Div>
</Body>
</Html>
Test results:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "BODY"
Google Chrome 0.2: "BODY"
Safari 3: "BODY
Conclusion:
When no CSS orientation is performed on an element or its DOM structure hierarchy (absolute or relative) [or when CSS orientation is performed on an element and no CSS orientation is performed on the element in the DOM structure level], the value of the offsetParent attribute of this element is the root element. More specifically, the reference object of the Offset calculation (offsetTop, offsetLeft, etc.) of this element is the Body element. (In fact, the root element is the Body element regardless of the standard compatibility mode or the weird mode)
Test code 2
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Untitled Document </title>
<Style type = "text/css">
# Parent {
Position: absolute; <! -- Position: relative; -->
Left: 25px;
Top: 188px;
Border: 1px solid black;
}
</Style>
<Script type = "text/javascript" language = "JavaScript">
Function offset_init (){
Var pElement = document. getElementById ("sonObj ");
ParentObj = pElement. offsetParent;
Alert (parentObj. tagName );
}
</Script>
</Head>
<Body onload = "offset_init ()">
<Div id = "parent"> div test code
<P id = "sonObj"> test the OffsetParent attribute </p>
</Div>
</Body>
</Html>
Test results:
Firefox3: "DIV"
Internet Explorer 7: "DIV"
Opera 9.51: "DIV"
Google Chrome 0.2: "DIV"
Safari 3: "DIV"
Conclusion:
When a parent element of an element is located in CSS (absolute or relative), the value of the offsetParent attribute of this element is its parent element. More specifically, the reference object of the Offset calculation (offsetTop, offsetLeft, etc.) of this element is its parent element.
Test code 3
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Untitled Document </title>
<Style type = "text/css">
# Grandfather {
Position: relative;
Left: 25px;
Top: 188px;
Border: 1px solid black;
}
</Style>
<Script type = "text/javascript" language = "JavaScript">
Function offset_init (){
Var pElement = document. getElementById ("sonObj ");
ParentObj = pElement. offsetParent;
Alert (parentObj. tagName );
}
</Script>
</Head>
<Body onload = "offset_init ()">
<H1 id = "Grandfather">
<Div id = "parent">
<P id = "sonObj"> test the OffsetParent attribute </p>
</Div>
</H1>
</Body>
</Html>
Test results:
Firefox3: "H1"
Internet Explorer 7: "H1"
Opera 9.51: "H1"
Google Chrome 0.2: "H1"
Safari 3: "H1"
Conclusion:
When neither an element nor its parent element is CSS located (absolute or relative), the value of the offsetParent attribute of this element is closest to it in the DOM structure hierarchy, and the CSS positioning element has been performed.
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
