This article if the offsetparent properties of JS in a detailed introduction, the need for friends can come to the reference, I hope to help you.
The Offsetparent property returns a reference to an object that is closest to the element that calls offsetparent (closest in the containing hierarchy) and is a container element that has been positioned as a CSS. If the container element is not positioned in CSS, the value of the Offsetparent property is the root element (HTML element in standard compatibility mode; a reference to the BODY element in the weird rendering mode). When the container element's style.display is set to "none" (except IE and opera), the offsetparent property returns NULL. Syntax: parentobj = element.offsetparent variable: · Parentobj is a reference to an element in which the offset of the current element is computed. Code as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <html> <head> & Lt;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 offsetparent Properties </p> </div> </body> </html> Test results: Firefox3: "Body" Internet Explorer 7: "The Body" Opera 9.51: "The body" of the Chrome 0.2: "Body" Safari 3: "Body conclusion: when a The offsetparent property of the element and its DOM hierarchy is rooted when the elements are not positioned as CSS (absolute or relative) [or when an element is positioned as CSS while the elements in the DOM hierarchy are not positioned as CSS]. More precisely, the reference to the various offsets of this element (offsettop, offsetleft, etc.) is the BODY element. (In fact, whether the standard compatibility mode or weird mode, the root element is the BODY element) test code 2 code is as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <html> <head> & Lt;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 p Element = 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 offsetparent Properties </p> </div> </body> </html> 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 as a CSS (absolute or Relati ve), the value of the offsetparent property of this element is its parent element. More precisely, the reference to the various offsets of this element (offsettop, offsetleft, etc.) is its parent element test Code 3 code as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <html> <head> & Lt;meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>untitled document</title> <style type=" Text/css "> #Grandfather { & nbsp 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 offsetparent Properties </p> </div> </h1> </body> </html> 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 element are not entered When line CSS is positioned (absolute or relative), the value of the offsetparent property of the element is the element that is closest to the DOM hierarchy and has been positioned by CSS. 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
