offsetWidth //Returns the width of the element (including element width, inner margin and border, excluding outer margin)
offsetHeight //Returns the height of the element (including element height, inner margin and border, excluding outer margin)
clientWidth //Returns the width of the element (including element width, inner margin, excluding border and outer margin)
clientHeight //Returns the height of the element (including element height, inner margin, excluding border and outer margin)
style.width //Returns the width of the element (including the element width, excluding the inner margin, border and outer margin)
style.height //returns the height of the element (including the element height, excluding the inner margin, border and outer margin)
scrollWidth //Returns the width of the element (including element width, inner margin and overflow size, excluding border and outer margin), without overflow, the same as clientWidth
scrollHeigh //Returns the height of the element (including element height, inner margin and overflow size, excluding border and outer margin), no overflow, the same as clientHeight
-
style.width returns a string, such as 28px, offsetWidth returns a value of 28;
-
style.width/style.height and scrollWidth/scrollHeight are readable and writable properties, clientWidth/clientHeight and offsetWidth/offsetHeight are read-only properties
-
The value of style.width needs to be defined in advance, otherwise the value obtained is empty. And it must be defined in html (inline style). If defined in css, the value of style.height is still empty, but the element offset is valid; and offsetWidth can still be obtained.
//-----------------------------------------------------------------------------------------------
offsetTop //Returns the distance from the upper outer edge of the element to the inner wall of the positioning parent element. If the parent element is not positioned, the distance from the upper outer edge to the inner wall of the document is obtained.
The so-called positioning is that the position attribute value is relative, absolute or fixed. The return value is an integer and the unit is pixel. This attribute is read-only.
offsetLeft //The principle of this property and offsetTop is the same, but the position is different, so I won't introduce it here.
scrollLeft //This property can get or set the distance from the leftmost of the object to the left of the object in the current window display range, that is, the distance the element is pulled to the left by the scroll bar.
The return value is an integer and the unit is pixel. This attribute is readable and writable.
scrollTop //This property can get or set the distance from the top of the object to the top edge of the object in the current window display range, that is, the distance the element scroll bar is pulled down.
The return value is an integer and the unit is pixel. This attribute is readable and writable.
//-------------------------------------------------------------------------------------------------
When a mouse event occurs (whether it is onclick, omousemove, onmouseover, etc.)
clientX The coordinates of the x-axis of the mouse relative to the upper left corner of the browser (this is the effective area of the browser); it does not change with the scrolling of the scroll bar;
clientY The coordinate of the mouse relative to the upper left corner of the browser (the effective area of the browser) on the y axis; does not change with the scrolling of the scroll bar;
pageX The coordinates of the x-axis of the mouse relative to the upper left corner of the browser (this is the effective area of the browser); it changes with the scroll bar;
pageY The coordinate of the mouse relative to the upper left corner of the browser (the effective area of the browser) on the y axis; it changes with the scroll bar;
screenX The coordinates of the mouse relative to the x-axis of the upper left corner of the display screen;
screenY The coordinates of the mouse relative to the y-axis of the upper left corner of the display screen;
offsetX The coordinates of the mouse relative to the X axis of the upper left corner of the event source
offsetY The coordinate of the mouse relative to the Y axis of the upper left corner of the event source