jQuery size algorithm

By default, we all use offsetWidth or offsetHeight to determine the value, but we know that the algorithm for these two sizes is as follows:

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;  offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

Without considering box-sizing:padding-box, That's about it. But don’t the size interfaces also have similar processing like

innerWidth, innerHeight, outerWidth, outerHeight? Of course, although they are all getting the size, there is still a difference.

innerWidth, innerHeight

Used to obtain the currently calculated internal width and height (including padding, but not including border) of the first element in the matching set, or to set the inner width and height of each matching element Width Height.

outerWidth, outerHeight

Get the current calculated width and height value of the first element in the element collection, including padding, border and optional margin

For these situations, jquery I have to give a method to remove the corresponding value. This is the corresponding augmentWidthOrHeight method

Let’s take a look at how to calculate it in detail

innerWidth = ele.offsetWidth –ele.borderRightWidth –ele.borderLeftWidth innerHeight = ele.offseHeight –ele.borderTopHeight –ele.borderBottomHeight

outerWidth If no parameters are passed, the algorithm will be the same as innerWidth Same

If you pass outerWidth(true), you need to add margin

outerWidth(true) = ele.offsetWidth + ele.marginLeft + ele.marginRight outerHeigth(true) = ele.offsetHeigth + ele.marginTop + ele.marginBottom

The interface algorithm for jQuery’s six size methods is like this

• php How to round decimals (with examples)

• Introduction to the configuration of php-fpm

• Two examples of php removing duplicate data from arrays

• PHP two-dimensional arrayInstance analysis of deduplication

• PHP array deduplication function code example

• Simple example of PHP array obtaining Key based on value

• asp registration code

• asp paging program

• Introduction to the basics of humanistic ASP development

• Breakthrough ASP technology

• php decimal taking Complete method (with examples)

• Introduction to the configuration of php-fpm

• Two examples of php removing duplicate data from arrays

• PHP two-dimensional array deduplication example analysis

• php array array deduplication function code example

• A simple example of PHP array obtaining Key based on value

• asp registration code

• asp paging program

• Introduction to the basics of humanistic ASP development

• Breakthrough ASP technology

The above is the detailed content of jQuery size algorithm. For more information, please follow other related articles on the PHP Chinese website!