The first is the ParentNode attribute, which is a good understanding, that is, in the DOM hierarchy definition of the subordinate relationship, if element A contains element B, then element B can be obtained through the Parentelement property of element A.
To understand the OffsetParent attribute, first understand the name "positioned element", the so-called "positioned element" is the style that sets the position attribute for the element, and the value of position style attribute equals absolute, relative, fixed One of the elements.
There are two scenarios when getting a parent object using the OffsetParent property:
1. The element itself has been positioned
If the element itself is already positioned, then the OffsetParent property returns that the element has been positioned as a parent element, such as a BODY object if there are no positioned parent elements, for example:
<Body> <Div> <spanID= "Obj1"style= "Position:absolute"></span> </Div> <DivID= "PObj1"style= "Position:absolute"> <spanID= "Obj2"style= "Position:absolute"></span> </Div> </Body>
Obj1.offsetparent returns the BODY object
Obj2.offsetparent return PObj1 Object
2. Element not positioned
If the element is not positioned, offsetParent will not only find the parent element that is already positioned but also find the parent element of type TD and TABLE, as long as any one of these three parent elements will return this element, otherwise the BODY object is returned, for example:
<Tablewidth= "$"Border= "0"> <TR> <TDID= "TD1"> <DivID= "PObj1"> <spanID= "Obj1"></span> </Div> </TD> </TR> <TR> <TD> <DivID= "PObj2"style= "Position:relative"> <spanID= "Obj2"></span> </Div> </TD> </TR> </Table>
Obj1.offsetparent return TD1 Object
Obj2.offsetparent return PObj2 Object
See also: The difference between JS Parentelement and offsetparent
The difference between parentnode and offsetparent in Javascrip
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
