Comparison of the methods of acquiring the wide-height and jquery gain width by native JS

  This article mainly introduced the native JS obtains the width high and the jquery obtains the width high method relation contrast, needs the friend to be possible to refer to under

Note: 1, because the situation to obtain a height is the same as the width of the case, so the following only said to get the width of the case.   2, all of the methods and properties mentioned below are returned with no units.   3, in order to facilitate the description, the following cases are abbreviated to represent:    obj-> in native JS to represent DOM objects; jquery object   Width-> Obj.style in jquery .width  offsetwidth-> obj.offsetwidth  $width-> obj.width ()   $innerWidth-> Obj.inne 　　　　Rwidth ()   $outerWidth-> obj.outerwidth ()   padding-> the padding-left and padding-right of the objects   The border-> represents the Border-left-width and border-right-width of the object and the related attributes of the     native JS get width are width and offsetwidth. The width of the method is Obj.style.width, only if the object is in the embedded way to set the width can be obtained, otherwise returned an empty string. The value obtained by offsetwidth is the same as the outerwidth of the object in jquery, Offsetwidth is a nonstandard but well supported attribute.     jquery has three methods of width (), innerwidth (), Outerwidth (). The specific use of the way is: Obj.width (), Obj.innerwidth (), Obj.outerwidth (). Width () Gets the content widths of the objects, Innerwidth () Gets the content width and padding width of the object, and Outerwidth () gets the width including the border, padding width, and content width.     The relationship between the five methods is as follows:    width = $width;  offsetwidth = border + padding +width;  $innerWiDTH = padding + width;  $outerWidth = border + padding +width;    These five methods for Firefox, Chrome, opera, Safari, IE6, IE7 , IE8, IE9 are compatible, but there are two kinds of problems: 1, the width in the absence of a set of circumstances, the first time the browser to open the page, the width of the obtained is all wrong. The second time you open it, the results are consistent with Firefox. 2, IE6 is not set to the case of wide-high, the scroll bar will not appear.