Acquisition of element dimensions

ScrollWidth , clientwidth , offsetwidth difference

ScrollWidth is the width of the actual content of the object, without the width of the edge, which changes with the contents of the object (more content may change the actual width of the object)

ClientWidth is the width of the object visible, not the edges of the scroll bars, etc., which change with the window's display size

The offsetwidth is the visible width of the object, and the edges such as the package scroll bar change with the window's display size.

There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

Width and height of the window display area (viewable area), including scroll bars

Window.innerheight-ie does not support this property, and the ClientHeight property of the body element in IE is the same as this property. Window.innerwidth–ie does not support this property, and the ClientWidth property of the body element in IE is the same as this property.

For Internet Explorer 8, 7, 6, 5:

Width and height of window display area (viewable area), excluding scroll bar area

Document.documentElement.clientHeightdocument.documentElement.clientWidth

Or

Document.body.clientHeightdocument.body.clientWidth

For the acquisition of element width dimensions, jquery offers the width method
For document-level non-trivial element window,document width gain

$ (window). Width ()  represents the breadth of the current browser's visible area, $ (document). Width () represents the entire document, and can have scrolling content

window reflects the view window, with no window.innerwidth (including scroll bar area)
Instead, the window.document.documentElement.clientWidth (excluding the scroll bar area) is used

Document is a reflection of the actual content range, then there can be overflow scrolling, so it is

Document.documentElement.scrollWidthdocument.body.scrollWidth

The maximum of 2 is taken as a result of compatibility issues

Divine Figure

JS gets a brief introduction to various widths and heights:

ScrollHeight: Gets the scroll height of the object.
ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property
OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property
Event.clientx horizontal coordinates of relative documents
Event.clienty vertical coordinates of relative documents
Event.offsetx horizontal coordinates relative to the container
Event.offsety the vertical coordinate of the relative container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling
The above mainly refers to IE, Firefox differences are as follows:

IE6.0, ff1.06+:

clientwidth = width + padding
clientheight = height + padding
offsetwidth = width + padding + border
offsetheight = height + padding + border

ie5.0/5.5:

ClientWidth = Width-border
ClientHeight = Height-border
offsetwidth = width
offsetheight = height

(Need to mention: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

Offsetwidth (Width+padding+border)

Assume that obj is an HTML control.

Obj.offsettop refers to the position of obj above or above the control, integral type, in pixels.

Obj.offsetleft refers to the position of obj from the left or upper control, the integer type, in pixels.

Obj.offsetwidth refers to the width, integer, and unit pixels of the obj control itself. Gets the width of the object's visible content, excluding scroll bars, excluding borders;

Obj.offsetheight refers to the height, integer, and unit pixels of the obj control itself.

The difference between offsetwidth and style.width

First, OFFSETTOP returns a number, and Style.top returns a string, in addition to the number of units: px.

Second, OffsetTop read only, and Style.top can read and write.

If the top style is not specified for the HTML element, Style.top returns an empty string.

Acquisition of element dimensions