The figure below shows the nuances of offsetwidth clientwidth scrollwidth scrolltop scrollleft and other attributes.

Summing up one night's observation of IE devtoolbar and firebug, we drew these two images to differentiate the nuances of offsetwidth clientwidth scrollwidth scrolltop scrollleft and other attributes, I hope it will help you write JavaScript!

In the first figure, oevent is a parameter object when a time occurs. You don't need to talk about how to obtain it in IE and ff. The entire large background is the full size of the webpage, and the small box in the middle is the visible size in the browser. This figure describes the height, width, top, and left of the document.

 

The second figure mainly describes the attribute values of a DIV in a webpage. "Div element client area" is the visible area of the DIV element, and "scroll area" is the original size of the DIV content, but the height and width of the div css cannot accommodate its content, so the scroll bar appears.

(The page width is limited, and the image may not be completely displayed. It is best to open the image in a new window)

 

Time is too short. If you have any mistakes, I hope you can point them out more.