A series of properties and methods in js, such as offsetWidth, clientWidth and scrollWidth, are always confused. Here is a summary of the usage and meaning of these methods.

Note: the following element attributes and element methods are used in the way of elem. Attribute or elem. Method, window attribute is used in the way of window. Attribute, and document attribute is called in the way of document.

<script>
    /*
     ****** Element view properties
     * offsetWidth Horizontal width + left and right padding + left and right border width
     * offsetHeight Vertical height + up and down padding + up and down border width
     * 
     * clientWidth Horizontal width + left and right padding
     * clientHeight Vertical height + up and down padding
     * 
     * offsetTop Gets the distance from the current element to the top direction of the positioning parent node
     * offsetLeft Gets the distance from the current element to the left direction of the positioning parent node
     * 
     * scrollWidth The actual width of the element content. When the content does not exceed the height of the box, it is the clientWidth of the box
     * scrollHeight The actual height of the element content. When the content does not exceed the box height, it is the clientHeight of the box
     * 
     ****** End of element view attribute
     * 
     ****** Window View properties (not supported by the lower version of IE browser [< IE9]) [self test includes scroll bar, but the web tutorial does not include??? ]
     * innerWidth Browser window viewable area width (excluding browser console, menu bar, toolbar) 
     * innerHeight Browser window visual area height (excluding browser console, menu bar, toolbar)
     * ***** Window End of view properties
     * 
     ****** Document Document view
     * (Alternatives to innerWidth and innerHeight of lower version IE)
     * document.documentElement.clientWidth Browser window viewable area width (excluding browser console, menu bar, toolbar, scroll bar)
     * document.documentElement.clientHeight Browser window visual area height (excluding browser console, menu bar, toolbar, scroll bar)
     * 
     * document.documentElement.offsetHeight Get the height of the whole document (including the body's margin)
     * document.body.offsetHeight Get the height of the entire document (excluding the body's margin)
     * 
     * document.documentElement.scrollTop Returns the distance in the top direction of the document's scrolling (the value changes when the window scrolls)
     * document.documentElement.scrollLeft Returns the distance in the left direction of the document's scrolling (the value changes when the window scrolls)
     ****** Document End of document view
     * 
     ****** Element method
     * 1. getBoundingClientRect() Get element to body
     *  bottom: The distance from the bottom edge of the element (including border) to the top of the viewable area
     *  left: The distance from the leftmost (excluding border) of the element to the leftmost of the visible area
     *  right: The distance from the rightmost (including border) of the element to the leftmost of the visible area
     *  top: The distance from the top edge of an element (excluding border) to the top of the viewable area
     *  height: offsetHeight of element
     *  width: offsetWidth of element
     *  x: x coordinate of the upper left corner of the element 
     *  y: y coordinate of the upper left corner of the element 
     * 
     * 2. scrollIntoView() Let elements scroll to the viewable area
     * 
     * ***** Element method end
     * 
     */
</script>

In the above properties, for window.innerWidth and window.innerHeight, the result value of my own test includes scrollbars, but the online tutorials and related documents do not include scrollbars. Although the width of the scrollbars is not large and the overall impact is not obvious, if there is an accurate answer from a Taoist friend, please do not hesitate to give me a comment, thank you!