jQuery's results for width and height are the same set of rules. This article only focuses on width.
jQuery provides three functions of width, innerWidth and outerWidth in the API to obtain the width.
$.fn.width()
The width obtained by width is only the width of the element itself, excluding padding, border, and margin
$.fn.innerWidth()
The width obtained by innerWidth is based on the width, plus the width of the padding
$.fn.outerWidth([includeMargin])
The outerWidth is the width of the innerWidth, increasing the width of the border (border)
outerWidth(true), the boolean parameter is set to specify the width of the outerWidth of the element, and then increase the width of the outer margin. Usually, for the width calculation of the element, we usually want to obtain the width of the visible area. The outer margin is usually The visible area of the element has no effect; in some cases, the outer border needs to be used to stretch the actual area to handle the visible range of the target. In this case, outerWidth(true) needs to be used. In most cases, it is not necessary to obtain the outer margin.
The above description of width, innerWidth, outerWidth([includeMargin]) applies to height, innerHeight, outerHeight([includeMargin]) in the same way
get precise values
Usually, the actual width of the target element can be obtained by using the above methods, but sometimes it is necessary to obtain very accurate data (including decimals) for specific values such as width, height, and coordinates, for example, when developing plug-ins, developing complex functions In the method described above, the obtained values are all integers. In fact, for the decimals in the data, the values returned by javascript and jquery are rounded, but sometimes the obtained values The rounding value of the debugged value in the controller is inconsistent, and it seems to be directly rounded. In this case, we need a way to obtain detailed data and accurately control the results in the program.
In javascript, there is an API function of getBoundingClientRect() in the function of the object, and the return value is a DOMRect object, which is a collection of a set of rectangles returned by the getClientRects() method of the element, that is, it is related to the element CSS borders collection.
As shown in the figure, the content returned by the function includes the following 8 attributes:
- bottom
- height
- left
- right
- top
- width
- x
- and
For the 8 attributes here, the obtained values are all the most accurate values, including complete data of decimals
So to get the width as an example, the method to get the exact width value is:
javascript
document.getElementById('elementid').getBoundingClientRect().widthjQuery
$('selector')[0].getBoundingClientRect().width
The picture in this article comes from the official website of jquery.com