The difference between js parentElement and offsetParent

The difference between js parentElement and offsetParent_javascript tips

WBOY

Release： 2016-05-16 18:31:31

Original

1372 people have browsed it

The first is the parentElement attribute. This attribute is easy to understand. It is the superior-subordinate relationship defined in the DOM hierarchy. If element A contains element B, then element B can obtain element A through the parentElement attribute.
What we are mainly talking about here is the offsetParent attribute. This attribute is not clearly explained in the MSDN documentation, which makes it more difficult to understand this attribute. In the past few days, I have been looking for some information on the Internet, and coupled with some of my own tests, I have a little understanding of this attribute. Let me summarize it here.
To understand the offsetParent attribute, you must first understand the name "positioned element". The so-called "positioned element" refers to the style that sets the position attribute to the element, and the value of the position style attribute is equal to one of absolute, relative, and fixed. elements.
There are two situations when using the offsetParent attribute to obtain the parent object:
1. The element itself has been positioned
If the element itself has been positioned, then the offsetParent attribute returns that the element has positioned the parent element, if not If the parent element has been positioned, the BODY object is returned, for example:

Copy code The code is as follows:

< /div>

, The element is not positioned
If the element is not positioned, offsetParent will not only find the positioned parent element but also find the parent element of type TD and TABLE. As long as any one of these three parent elements is found This element will be returned, otherwise a BODY object will be returned, for example:

Copy code

The code is as follows: