Test the difference between these three properties through a demo.
illustrate:
scrollWidth: The width of the actual content of the object, the width of the line without edges, will become larger as the content in the object exceeds the viewing area.
clientWidth: The width of the viewing area of the object content, without wrapping the scroll bar equilateral lines, will change as the object display size changes.
offsetWidth: The actual width of the object as a whole, the scroll bar is equally edged, which will change as the object displays the size.
The demo puts a textarea element in the page and displays it with the default width and height.
Situation 1:
If there is no content in the element or the content does not exceed the viewing area, scrolling does not appear or is not available.
scrollWidth=clientWidth, both are the width of the content viewing area.
offsetWidth is the actual width of the element.
Situation 2:
The content of the element exceeds the viewing area, the scroll bar appears and is available.
scrollWidth>clientWidth.
scrollWidth is the width of the actual content.
clientWidth is the width of the content viewing area.
offsetWidth is the actual width of the element.
END
The above is all the differences between scrollWidth, clientWidth, and offsetWidth. I hope it will be helpful to everyone.