ScrollWidth (Height/Left/Top), offsetWidth (Height/Left/Top), and clientWidth (Height/Left/Top) in DOM)

(1) The test code is as follows:

<style type="text/css">    *{         margin: 0;        padding: 0;    }    #myDiv{        width: 100px;        padding: 5px;        height: 100px;        border: #000 5px solid;        margin: 100px;        overflow:scroll;    }</style>


Browser: chrome22 firefox12.0 IE9 & IE6
The pop-up results show that all values except scrollHeight are the same (Note: Before testing, make sure that the html document structure is complete and that the document declaration is specified. If the document declaration is missing, a problem occurs in the Box Model in ie and the pop-up result changes .)
The pop-up value is as follows:

(2) Explain scroll -- offset -- client based on the preceding css values.
ScrollWidth (the width of the content in the element does not contain the border and scrollbar of edge properties) = width + padding-scrollbarWidth;
ScrollHeight (same as scrollWidth) = Height + padding-scrollbarHeight;
For scrollWidth and scrollHeight, note that when the width or height of the content exceeds the actual width/height (such as the width and height defined by css, scrollWidth/Height is used to display its features. Its value is the width and Height of the actual content (greater than the actual width/Height of the container ).
This test does not show scrollLeft and scrollTop. In fact, these two values are displayed only when the content exceeds the element. For example, if the width is PX, but the actual content is PX, when you drag the scrollbar to the middle position, the content is greater than 25 PX for each element, and the scrollLeft value is 25. Therefore, scrollLeft refers to the distance between the current left boundary of the content and the actual left boundary of the content. The principle of scrollHeight is the same as that of scrollHeight.
OffsetWidth (visible width of the element) = width + padding + border
OffsetHeight (visible height of the element) = height + padding + border
OffsetLeft (the distance between the left boundary visible to the element and the left boundary closest to the element itself) = margin-left
OffsetTop (the distance between the visible upper boundary of an element and the upper boundary closest to the element itself) = margin-top
ClientWidth (visible width of the element content, equivalent to scrollWidth when the element content does not exceed the actual width) = width + padding-scrollbarWidth;
ClientWidth (visible Height of the element content, equivalent to scrollHeight when the element content does not exceed the actual Height) = Height + padding-scrollbarHeight;