Get DOM element location information by offset and client

offset Get the width, height and offset of the element

• offsetTop Gets the distance that the upper part of the element is offset from the parent element with positioning , If none of the parent elements are positioned, the relative value is returned body Distance of
• offsetLeft Work with offsetTop
• offsetParent Returns the parent element with the location of the element , If none of the parent elements has a location, return body
• offsetWidth Returns the element width , Include padding, Frame , The width of the content area
• offsetHeight Work with offsetWidth

offset And style The difference between

The most obvious difference is offset The obtained property value is a read-only property , Cannot be used to modify the size and offset of the element itself , Is a numerical value without units
and style The property value obtained is the read-write property , It can be used to modify the size and offset of the element itself
Besides ,style Only the style attributes specified by the element in the inline style can be obtained , and offset You can get the attributes specified by the element in any way

Click the event to obtain the mouse coordinates

• e.pageX You can get the distance from the mouse of the click event to the left of the page
• e.pageY You can get the distance from the mouse of the click event to the top of the page

client Get the element border and width and height

• clientTop Get the top border size
• clientLeft Get the size of the left border
• clientWidth Get the element width , No borders
• clientHeight Get element height , No borders

scroll Get scroll information

• scrollTop Get the upper distance of the element being rolled away
• scrollLeft Returns the distance to the left of the element being rolled away
• scrollWidth Gets the width of the element itself No borders
• scrollHeight Get the height of the element itself No borders And clientHeight The difference is that , When the element content overflows ,scrollHeight Or return the height containing the overflow content , and clientHeight Will not be

Get the scrolling distance of the page

• window.pageXOffset Get the rolling distance on the whole page
• window.pageYOffset Get the right scrolling distance of the whole page