Web front-end study notes-the difference between scrollWidth, clientWidth, and offsetWidth_html/css_WEB-ITnose

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 puts a textarea element on the page and uses 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: The content of the

element exceeds the visual area and the scroll bar appears and is available.

scrollWidth>clientWidth.

scrollWidth is the width of the actual content.

clientWidth is the width of the content visual area.

offsetWidth is the actual width of the element.

and above.