The difference between scrollWidth, clientWidth and offsetWidth_javascript skills

Test the difference between these three attributes through a demo.

Description:

scrollWidth: The width of the actual content of the object, excluding the edge width, will increase as the content in the object exceeds the visible area.
clientWidth: The width of the visual area of ​​the object content, excluding scroll bars and other edges, will change as the display size of the object changes.
offsetWidth: The actual width of the entire object, including scroll bars and other edges, will change as the display size of the object changes.

This demo places a textarea element on the page and displays it using the default width and height.

Case 1:

There is no content in the element or the content does not exceed the visible area, and scrolling does not appear or is unavailable.

scrollWidth=clientWidth, both are the width of the content visible area.

offsetWidth is the actual width of the element.

Case 2:

When the content of the

element exceeds the visual 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 visible 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.