1. The client part
ClientHeight: The height of the viewable area of the content, that is, the height of the area in the page browser where the content can be seen (without borders, scrollbars and other edges, which change with the display size of the window)
ClientLeft,clientTop: These return the border of the element, 0 if no border is specified or the element is not positioned.
2. The offset section
The border and padding of the object are included in the calculation
OffsetLeft: Gets the distance between the left side of the object and the location parent
OffsetTop: Gets the distance between the upper side of the object and the location parent
PS: The distance from the object to its parent depends on the nearest parent position
OffsetWidth: Gets the width of the element itself (including the border)
OffsetHeight: Gets the height of the element itself (including the border)
Note: Unlike style.top, offsetLeft is only readable and cannot be assigned. OffsetTop returns a number, while style.top returns a string with the unit px in addition to the number. The difference from the style.width property is that if the width of an object is set to a percentage width,style.width returns this percentage regardless of whether the page becomes larger or smaller, whereas offsetWidth returns the width of the object on different pages instead of the percentage value
3. ClienX offsetX screenX pageX
The most important difference here is that the above two object attributes are relative to the tag element; ClientX and offsetX are relative to mouse event objects, that is, the mouse event must be triggered to have clientX and offsetX.
ClientX: The horizontal coordinate of the mouse pointer relative to the left edge of the window when the event is triggered. The reference point is the upper left corner of the browser content area, and this reference point moves with the scroll bar movement.
OffsetX: The horizontal coordinate of the mouse pointer relative to the inner left border of the tag element that was triggered when the event was triggered.
ScreenX: The horizontal offset of the mouse position relative to the user’s screen. ScreenY is vertical, and the reference point is the upper-left corner of the screen.
PageX: The reference point is the origin of the body of the page itself, not the upper left corner of the browser content area. It does not change the value of the scroll bar. It actually calculates the origin of the upper left corner of the body (the upper left corner of the page itself, not the upper left corner of the browser’s visible area) as the reference point. This is equivalent to taking into account the height or width of the scroll bar, so it is the same distance regardless of whether the scroll bar is rolled or not.
Therefore, it can be basically concluded that:
pageX > clientX, pageY > clientY
PageX = clientX + ScrollLeft
PageY = clientY + ScrollTop(vertical distance of scrollbar)
3. Scroll part
ScrollLeft: Sets or gets the current left roll distance, that is, the left roll distance;
ScrollTop: sets or gets the current roll up distance, that is, the roll up distance.
ScrollHeight: Gets the total scrolling height of the object; ScrollWidth: Gets the total scrolling width of the object;