Sometimes, in the project, you use js to obtain element positions to locate elements. First, use the picture to explain the relationship between scrollWidth, clientWidth, and offsetWidth.
A brief introduction to JS obtaining various widths and heights :
scrollHeight: Gets the scroll height of the object.
scrollLeft: Set or get the distance between the left boundary of the object and the leftmost end of the currently visible content in the window
scrollTop: Set or get the distance between the top of the object and the top of the visible content in the window
scrollWidth: Get the scroll width of the object
offsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property
offsetLeft: Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent property
offsetTop: Gets the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop property
event.clientX horizontal coordinates relative to the document
event.clientY vertical coordinates relative to the document
event.offsetX horizontal coordinates relative to container
event.offsetY vertical coordinates relative to container
document.documentElement.scrollTop The value of scrolling vertically
event.clientX+document.documentElement.scrollTop relative to the horizontal coordinate of the document + the amount of scrolling in the vertical direction
The above mainly refers to IE, and the differences in FireFox are as follows:
IE6.0, FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(It should be mentioned that the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, and offsetHeight)
offsetWidth (width+padding+border)
Assume obj is an HTML control.
obj.offsetTop refers to the position, integer, unit pixel from obj to the upper or upper control.
obj.offsetLeft refers to the position, integer, unit pixel from obj to the left or upper control.
obj.offsetWidth refers to the width, integer, and unit pixels of the obj control itself. Gets the width of the visible content of the object, excluding scroll bars, and borders;
obj.offsetHeight refers to the height, integer, unit pixel of the obj control itself.
The difference between offsetWidth and style.width
1. OffsetTop returns a number, while style.top returns a string, which also contains the unit: px in addition to the number.
2. OffsetTop is read-only, while style.top is read-write.
3. If no top style is specified for HTML elements, then style.top returns an empty string.