Comparison of the relationship between native js's method of obtaining width and height and jquery's method of obtaining width and height_javascript skills

Note: 1. Because the situation of obtaining the height is the same as the situation of obtaining the width, so only the situation of obtaining the width is discussed below.
2. The values ​​returned by all methods and attributes mentioned below are unit-less.
　3. For convenience of explanation, the following situations are represented by abbreviations:

　obj -> represents the DOM object in native JS; represents the JQuery object in JQuery
Width -> obj.style.width
OffsetWidth -> obj.offsetWidth
$width -> obj.width()
$innerWidth -> obj.innerWidth()
$outerWidth -> obj.outerWidth()
padding -> Represents the sum of padding-left and padding-right of the object
　border -> Represents the sum of border-left-width and border-right-width of the object

The related properties of native JS to obtain width are width and offsetWidth. The acquisition method of width is obj.style.width, which can only be obtained when the width of the object is set inline, otherwise an empty string is returned. The value obtained by offsetWidth is the same as the outerWidth obtained by the object in JQuery. offsetWidth is a non-standard but well-supported property.

JQuery has three methods to obtain width: width(), innerWidth(), and outerWidth(). The specific usage methods are: obj.width(), obj.innerWidth(), obj.outerWidth(). width() obtains the content width of the object, innerWidth() obtains the sum of the object's content width and padding width, and outerWidth() obtains the width including the border, padding width and content width.

The relationship between these five methods is as follows:

width = $width;
offsetWidth = border padding width;
$innerWidth = padding width;
$outerWidth = border padding width;

These five methods are compatible with firefox, chrome, opera, safari, ie6, ie7, ie8, and ie9, but there are two problems: 1. The width is not set Below, when Chrome opens the page for the first time, all the widths obtained are wrong. When opening it for the second time, the result is consistent with Firefox. 2. When the width and height are not set in IE6, the scroll bar will not appear.