jquery Tutorial: jquery definition of element size and location

Article Introduction: recently, the drama in learning some of the applications of jquery, has contacted jquery for element size and location definition, as well as the browser size and state of the calculation of some of the animation effects. In fact, such jquery applications, like these, involve calls to these properties: Innerheight (), Innerwidth (), Outerheight (), Outerheight (True), Outerheight (FAL

Recently, the drama in learning some of the applications of jquery, has contacted jquery for element size and location definition, as well as the browser size and state of the calculation of some of the animation effects. In fact, such jquery applications, like these, involve calls to these properties: Innerheight (), Innerwidth (), Outerheight (), Outerheight (True), Outerheight (false), Outerwidth (True), Outerwidth (false), position (), offset (), scrolltop (), ScrollLeft ().

By looking at each explanation alone, you can basically give a clear feeling. But when applied, it always causes confusion, especially position () and offset (). The little play was initially blown up by the heads of these parameters.

The drama feels that when animating, these parameters are especially useful, but the nuances of each parameter are not known for a while. So today it took half a day to analyze the API carefully, and then try to verify their own ideas, holding a pen on the paper to draw, confirmed correct, made so two artwork. for future reference.

jquery's definition of dimensions view the original

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

Below take the height as an example to write the calculation method of each size, the width calculation method is consistent with it.
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 Definition of Location view the original

Here the play uses an imaginary computer screen to extend the idea to explain the definition of jquery position. For many beginners it is hard to understand $ (document). ScrollTop (), I believe that the play with this diagram to explain the rolling height, a lot of people can see at a glance what this height refers to which length. In fact, Srcolltop () is not limited to the browser's scroll bar, any of its own fixed height, and overflow value is hidden element, 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, and position () is for the offset of the element's relative positioning parent element. The simple thing is to set the position as a relative or absolute parent, but in many cases there is no parent element set to locate, and position () and offset () are the same. But when we write code we should know exactly which one to use in order to avoid the inconvenience caused by later maintenance.

The legend only wrote a high degree of interpretation, width and height of the interpretation of the same way, you can understand.

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