Compare the method relation between the width and height of native js and that of jquery
- 2020-03-30 02:35:02
- OfStack
1. Because the case of obtaining height is the same as the case of obtaining width, the following is only the case of obtaining width.
2. All the following methods and properties return values without units.
3. For the convenience of explanation, the following situations are expressed in abbreviations:
Obj - > Represents DOM objects in native JS; Represents a JQuery object in JQuery
Width - > Obj. Style. The width
OffsetWidth - > Obj. OffsetWidth
$width - > Obj. Width ()
$innerWidth - > Obj. InnerWidth ()
$outerWidth - > Obj. OuterWidth ()
Padding - > Represents the sum of the padding left and the padding right of the object
Border - > Represents the sum of the border-left-width and border-right-width of the object
The properties associated with the width of the native JS fetch are width and offsetWidth. Width is obj.style.width, which can only be obtained if the object is set as an inline width, otherwise an empty string is returned. OffsetWidth gets the same value as the outerWidth of the object in JQuery. OffsetWidth is a non-standard but well-supported property.
JQuery has three methods: width(), innerWidth(), and outerWidth(). Obj. width(), obj.innerWidth(), and obj.outerWidth(). Width() gets the content width of the object, innerWidth() gets the content width and the fill width of the object, and outerWidth() gets the width including the border, the fill width and the fill 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, ie9, but there are two problems: 1. When the width is not set, the first time chrome opens the page, the width obtained is all wrong. The second time you open it, it looks like firefox. 2, ie6 does not set the width and height of the case, will not appear scroll bar.
2. All the following methods and properties return values without units.
3. For the convenience of explanation, the following situations are expressed in abbreviations:
Obj - > Represents DOM objects in native JS; Represents a JQuery object in JQuery
Width - > Obj. Style. The width
OffsetWidth - > Obj. OffsetWidth
$width - > Obj. Width ()
$innerWidth - > Obj. InnerWidth ()
$outerWidth - > Obj. OuterWidth ()
Padding - > Represents the sum of the padding left and the padding right of the object
Border - > Represents the sum of the border-left-width and border-right-width of the object
The properties associated with the width of the native JS fetch are width and offsetWidth. Width is obj.style.width, which can only be obtained if the object is set as an inline width, otherwise an empty string is returned. OffsetWidth gets the same value as the outerWidth of the object in JQuery. OffsetWidth is a non-standard but well-supported property.
JQuery has three methods: width(), innerWidth(), and outerWidth(). Obj. width(), obj.innerWidth(), and obj.outerWidth(). Width() gets the content width of the object, innerWidth() gets the content width and the fill width of the object, and outerWidth() gets the width including the border, the fill width and the fill 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, ie9, but there are two problems: 1. When the width is not set, the first time chrome opens the page, the width obtained is all wrong. The second time you open it, it looks like firefox. 2, ie6 does not set the width and height of the case, will not appear scroll bar.