Graphic: each family
The same is true in the Y direction
page family:
Reference point: the upper left corner of the web page
pageX: the horizontal offset of the mouse click position relative to the upper left corner of the web page, that is, the distance from clientX plus the horizontal scroll bar
pageY: the vertical horizontal offset of the mouse click position relative to the upper left corner of the web page, That is, clientY plus the distance of the vertical scroll bar
Client family:
Reference point: Get the position of the cursor relative to the upper left corner of the visible window of the browser
clientX: The horizontal offset of the mouse click position relative to the visible area of the browser (the distance of horizontal scrolling will not be calculated)
clientY: The mouse click position relative to the visible area of the browser The vertical offset of the viewport (the distance of the vertical scroll bar will not be calculated)
Screen Family:
Reference point: the upper left corner of the computer screen
screenX: the horizontal offset of the mouse click position relative to the upper left corner of the computer screen
screenY: the vertical offset of the mouse click position relative to the upper left corner of the computer screen
The Scoll family:
Reference point: the position of the current page relative to the upper left corner of the web page
scrollX: The left distance to be scrolled away (the page is scrolled horizontally, the distance pulled by the scroll bar)
scrollY: The upper side distance that is rolled away (the page scrolls vertically, the distance that the scroll bar pulls)
PS.scrollX, scrollY: only read but not write ;
scrollTop, scrollLeft: readable and writable
Offset family:
Reference point: the position of the cursor relative to the upper left corner of the current DOM element
offsetX: the horizontal distance of the mouse click position relative to the trigger event object
offsetY: the vertical distance of the mouse click position relative to the trigger event object
| name |
Is it read-only |
Contains |
Whether to include border |
Whether to include a scroll bar |
Affiliation API |
| clientHeight/clientWidth |
yes |
content/padding |
no |
no |
Element |
| clientTop/clientLeft |
yes |
border-width |
It's the border itself. That's right. |
no |
Element |
| scrollHeight/scrollWidth |
yes |
content/padding/parts not displayed due to scrolling |
no |
no |
Element |
| scrollTop/scrollLeft |
no |
scrolling content |
no |
no |
Element |
| offsetHeight/offsetWidth |
yes |
content/padding/border/scrollbar |
yes |
yes |
HTMLElement |
| offsetTop/offsetLeft |
yes |
Child border outer edge to parent padding outer edge |
no |
no |
HTMLElement |