Home > Developer > Web Develop
The OffsetParent property returns a reference to an object that is closest to the element that called OffsetParent (closest to the containing hierarchy) and is a container element that has been positioned in CSS. If the container element does not have CSS positioning, the offsetparent property is referenced to the root element (the HTML element in standard compatibility mode; The body element in the weird rendering mode). When the style.display of the container element is set to "none" (except IE and opera), the offsetparent property returns NULL.
Syntactic:
Parentobj = element.offsetparent
Variable:
parentobj is a reference to an element in which the offset of the current element is calculated.
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><Scripttype= "Text/javascript"language= "JavaScript">Functionvar=""=</Script></Head><Bodyonload= "Offset_init ()"><DivID= "Parent"><PID= "Sonobj">Test offsetparent Properties</P></Div></Body></HTML>
Test Results:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "BODY"
Chrome 0.2: "BODY"
Safari 3: "BODY
Conclusion:
When elements in an element and its Dom hierarchy are not CSS-positioned (absolute or relative) [or if an element is CSS-positioned and the elements in the DOM hierarchy are not CSS-positioned ], the value of the offsetparent property of this element is the root element. Rather, the reference to the various offsets of this element (OffsetTop, offsetleft, etc.) is the BODY element. (In fact, both the standard compatibility mode and the weird mode, the root element is the BODY element)
Test Code 2
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><styletype= "Text/css">{:;:;:;:;}style><script type= "Text/javascript" language= "JavaScript" >functionvar= "=</script>
Test Result:
Firefox3: "DIV"
Internet Explorer 7: "div"
Opera 9.51: "Div"
Chrome 0.2: "div"
Safari 3: "div"
Conclusion:
When the parent element of an element is positioned in CSS (absolute or relative), the value of the offsetparent property of the element is its parent element. Rather, the reference to the various offsets of this element (OffsetTop, offsetleft, etc.) is the parent element
Test Code 3
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><styletype= "Text/css">{:;:;:;:;}style><script type= "Text/javascript" language= "JavaScript" >functionvar= "=</script>
Test Results:
Firefox3: "H1"
Internet Explorer 7: "H1"
Opera 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"
Conclusion:
when an element and its parent are not CSS-positioned (absolute or relative), the element's Offsetparent property is evaluated as being closest to the DOM hierarchy and the element that has been positioned in CSS.
JS offsetparent Properties
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
