On the height and width_jquery in jquery

In jquery, there are three ways to get the height of an element: height (), innerheight (), outerheght (BOOL), and three ways to get the element width: width (), Innerheight (), outerheight (BOOL), the three methods corresponding to the element properties, as shown in the following figure:

From the above diagram, you can see that the height () method corresponds to the Width property of the top style setting;

Innerheight () corresponds to Width+padding-top+padding-bottom;

Outerheight () corresponds to Width+padding-top+padding-bottom+border-top+border-bottom;

Also see that the following outerheight is not the same as the Outerwidth value because the Outerwidth (bool) method parameter is set to True.
At this time will add margin-top and margin-bottom;
namely: Outerwidth = Width+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

Here's a simple example.