JavaScript in Offsetwidth, clientwidth, Width, scrollwidth, ClientX, ScreenX, OffsetX, PageX

offsetwidth //Returns the width of the element (including element width, padding, and border, excluding margins)

offsetheight //Returns the height of the element (including element height, padding, and border, excluding margins)

clientwidth //Returns the width of the element (including element width, padding, excluding borders and margins)

clientheight //Returns the height of the element (including element height, padding, excluding borders and margins)

Style.width //Returns the width of the element (including the element width, excluding padding, borders, and margins)

Style.height //Returns the height of the element (including the element height, excluding padding, borders, and margins)

ScrollWidth //Returns the width of the element (including element width, padding and overflow dimensions, excluding borders and margins), no overflow, same as clientwidth

Scrollheigh //Returns the height of the element (including element height, padding and overflow dimensions, excluding borders and margins), no overflow, same as clientheight

Note: The difference between offsetwidth (offsetheight) and Style.width (Style.height)

1. Style.height returns a string, such as 28px,offsetwidth returns the value, if it is necessary to calculate the value obtained , it is more convenient to use offsetwidth;

If you get the value of offsetwidth setting style.left, add ' px '.

2. Style.width/style.height and Scrollwidth/scrollheight are read-write properties,

Clientwidth/clientheight and Offsetwidth/offsetheight are read-only properties

3. The value of style.height needs to be defined beforehand, otherwise the value taken is null.

and must be defined in the HTML, if defined in the CSS, the value of Style.height is still empty, but the element offset is valid;

And the offsetwidth can still be taken.

//-----------------------------------------------------------------------------------------------

When a mouse event occurs (either onclick, omousemove,onmouseover, etc.)

ClientX The position of the x-axis in the upper-left corner of the mouse relative to the browser (which is said to be the active area of the browser), and does not change with the scroll bar scrolling;

ClientY The position of the y-axis of the upper-left corner of the mouse relative to the browser (which is said to be the active area of the browser), and does not change with the scroll bar scrolling;

PageX The position of the x-axis in the upper-left corner of the mouse relative to the browser (in this case, the active area of the browser), as the scroll bar scrolls;

Pagey The position of the y-axis of the upper-left corner of the mouse relative to the browser (in this case, the active area of the browser), and changes with the scroll bar;

ScreenX The x-axis coordinates of the mouse relative to 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 coordinates of the x-axis of the mouse relative to the upper-left corner of the event source

OffsetY The coordinates of the mouse relative to the upper-left corner of the event source y-Axis

Images quoted from Lzding's blog

JavaScript offsetwidth, clientwidth, Width, scrollwidth, ClientX, ScreenX, OffsetX, PageX