JS offsetparent Property

Source: Internet
Author: User
Tags tagname

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 current element's offset is calculated.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

  

test Result:
        Firefox3: "BODY"
       Internet Explorer 7: "BODY"
       Opera 9.51: "BODY"
      Chrome 0.2: "BODY"
      Safari 3: "BODY

Conclusion:
When an element and its Dom hierarchy are not positioned in CSS (absolute or relative) [or if an element is CSS-positioned When elements in the DOM hierarchy are not positioned in CSS , the offsetparent property of the 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" >

  

Test results:
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" >

   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.

Source: http://www.cnblogs.com/jhxk/articles/1669680.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.