Figure jquery Size and location definition

Recently, some of the applications of jquery have come into contact with jquery's definition of element size and location, as well as some animated effects in conjunction with the calculation of browser size and state. In fact, like this type of jquery application, there are no calls involving these attributes: Innerheight (), Innerwidth (), Outerheight (), Outerheight (True), Outerheight (false), Outerwidth (True), Outerwidth (false), position (), offset (), scrolltop (), ScrollLeft ().

Looking at each explanation alone can basically give people a sense of clarity. But there is always confusion in the application, especially position () and offset (). At first it was also the head of these parameters went up.

These parameters are especially useful when animating, but it's not clear what the nuances of each parameter are. So today spent a half a day, to the API careful analysis, and then try to verify their own ideas, holding a pen on paper painting to paint, confirm the error, made so two pictures. for future reference.

jquery's definition of dimensions

The definition of dimensions is well understood, but it is easy to confuse when using the parameters of Outerheight (), outerwidth (), especially when it is easy to write the default value false to True.

Below take the height as an example to write a calculation method of each size, the width calculation method and the same.

Innerheight () = "Padding-top" + "height" + "Padding-bottom"

Outerheight () =outerheight (false) = "Border-top-width" + "padding-top" + "height" + "Padding-bottom" + " Border-bottom-width "

Outerheight (true) = "Margin-top" + "border-top-width" + "padding-top" + "height" + "Padding-bottom" + "border-bottom-width "+" Margin-bottom "

jquery's definition of location

Here is a hypothetical computer screen that can be stretched upward to explain jquery's definition of location. For many beginners it is difficult to understand the $ (document). ScrollTop (), I believe that using this graph to explain the height of the scroll, many people can see at a glance what length this height refers to. In fact Srcolltop () is not limited to the browser scroll bar, any of its own fixed height, and overflow value of hidden elements, you can use this property.

For position () and offset (), the only difference is that offset () is for the offset of the element relative to the browser, while position () is for the offset of the element relative to the positioned parent element. It is simpler to say that the position is relative to the parent of relative or absolute, but in many cases there is no parent element setting the positioning, at which point the position () and offset () are the same. But when we write code, we should know exactly which one to use to avoid the inconvenience caused by later maintenance.

In the legend, only the height of the interpretation, width and height of the interpretation of the same way, you can understand.

Of course, these are just dramatis personae to the location and size of jquery a little understanding, there may be inaccurate or wrong place, in order to avoid fraught, you are welcome to share your ideas with the small play.

Figure jquery Size and location definition