Detailed description of several common location and dimension attributes in the CSSOM view Model

What is the CSSOM view model? I will not explain it here. If you are interested, visit the official website. Here we will only talk about a few useful but confusing attributes. These attributes are quite compatible, so you don't need to pay too much attention to the browser environment.

ClientLeft and clientTop

Returns the offset distance between the upper left boundary of the element content area (including the padding and visible area) and the upper left boundary of the entire area of the element (including the border but not the margin, compatible with common browsers (ie 6 +, firefox 3.0 +, chrome 4 +, opera 10.10 +, and safari 4.0 +)

Ps: visible area refers to the part we can see, that is, not the part that is hidden when the hidden part is exceeded or has a scroll bar.

Ps: If we mention the content area of an element again, it refers to the area containing the padding. the entire area of the element refers to the area containing the padding and border, the region that does not contain margin.

 

OffsetLeft and offsetTop

Returns the offset distance between the upper left boundary of the entire area of an element and the top left boundary of the content area of the closest ancestor element (also known as offsetParent) that has a dynamic location (except static location.

Note: in ie6, when the position attribute of the offsetParent element is relative, the calculation points of offsetLeft and offsetTop are changed to the upper left corner of the document, and ie7 + is to be tested.

In addition, as mentioned in the book and in many places, offsetParent's top-level element (that is, when there is no ancestor element with dynamic positioning in the page, this top-level element will be taken as offsetParent) is the body, however, in reality, offsetParent's top-level element should be html. In absolute positioning, the highest reference object is html, not body.

Ps: in IE and operabrowsers,The position attribute is fixed.Is notOffsetParent.

Conclusion: The calculation of clientLeft and clientTop involves only one element, namely itself, while offsetLeft and offsetTop require one of its parent elements to participate in the calculation. Therefore, they involve two elements.

ClientWidth and clientHeight

Returns the size of the element content area (including padding, but not the border and scroll bar, and visible area), compatible with common browsers.

Ps: When a scroll bar is generated, the element size does not increase, but is deducted from its own space.

 

OffsetWidth and offsetHeight

Returns the size of the entire element (including padding and border), compatible with common browsers

Summary: from the preceding attributes, we can see that the client is related to the element content area, and the offset is related to the entire element area.

 

ScrollLeft and scrollTop

Returns the distance from the scrolling part of the element, which is compatible with common browsers.

 

ScrollWidth and scrollHeight

Return the clientWidth or clientHeight of the element (including the hidden or scrolling part), compatible with common browsers.

Note:ClientWidth or clientHeight does not include the hidden or scrolling part.

 

ClientX and clientY

When a mouse event is returned, the cursor is relative to the position in the upper left corner of the browser window. It has nothing to do with the border, internal and external margins of html or body, and is compatible with common browsers.