JQuery 1.9.1 Source Analysis Series (13) Position size operation _jquery

Let's show you thank you.

JQuery.fn.css (PropertyName [, Value]| object) (the function is used to set or return the value of the CSS style attribute of the element that matches the current jquery object.) If you need to delete the specified CSS property, use the function to set its value to an empty string ("")

　　Note: 1, if the value parameter is omitted, the property value is obtained, or the property value is set if the parameter is specified. 2. All "Set" actions of the CSS () function are for each element that matches the current jquery object; All read operations are only for the first matching element. ）

JQuery.fn.offset ([coordinatesobj]) (Sets or returns the current matching element (the Content+padding+border as a whole) offset from the current document, that is, the coordinates relative to the current document. This function is valid only for visible elements. This function returns a Coordinate object, which has a left property and a top property. Property values are numbers, all in pixels (px). Unlike position (), offset () returns the coordinates relative to the current document, and position () returns the coordinates of the ancestor element that is positioned relative to it. ）

JQuery.fn.position () returns the offset of the current matching element (Content+padding+border+margin as a whole) relative to the ancestor element to which it is positioned, that is, the coordinates of the ancestor element being positioned. This function is valid only for visible elements. The so-called "positioned element" is the CSS position attribute value of the element is absolute, relative, or fixed (as long as it is not the default static). This function returns a coordinate object that has a left property and a top property. Property values are numbers, all in pixels (px). The difference from offset () is described in offset. Additionally, the position () function cannot be used for setup operations. If the ancestor element of the current element is all default positioned (static), the function returns the same offset () function

JQuery.fn.scrollLeft ([value]) Sets or returns the offset of the current matching element to the left of the horizontal scroll bar. When the actual width of an element exceeds the width of its display area, the browser displays the corresponding horizontal scroll bar for that element under certain settings. At this point, scrollleft () returns the width (in pixels) of the hidden portion of the element to the left of the visible scrolling area.

ScrollLeft () returns 0 if the horizontal scroll bar is on the left side (that is, there is no hidden content on the left side of the visible area), or if the current element is not scrolled horizontally. is valid for both visible and hidden elements. ）

JQuery.fn.scrollTop ([value]) Sets or returns the offset of the current matching element relative to the top of the vertical scroll bar. When the actual height of an element exceeds the height of its display area, the browser displays the corresponding vertical scroll bar for the element under certain settings. At this point, scrolltop () returns the height (in pixels) of the element that is hidden above the visible area. ScrollTop () returns 0 if the vertical scroll bar is on top (that is, there is no hidden content above the visible area), or if the current element is not scrolled vertically. Valid for both visible and hidden elements)

JQuery.fn.height ([value]) Sets or returns the height of the current matching element. The height value does not include the height of the element's outer margin (margin), inner margin (padding), Border (border), and so on. The following figure

　　

Use Innerheight () and outerheight () if you want to obtain a height including one of the above sections. This function belongs to the jquery object (instance) and is still valid for elements that are not visible

JQuery.fn.innerHeight ([value]) Sets or returns the height of the current matching element. The height value includes the inner margin (padding), but does not include the height of the element's outer margin (margin), border (border), and so on. The following figure:

　　

This function belongs to the jquery object (instance) and is still valid for elements that are not visible

JQuery.fn.outerHeight ([Includemargin]) (Sets or returns the outer height of the current matching element.) The height value includes the inner margin (padding), Border (border), but does not include the height of the outer margin (margin) portion of the element. You can also specify that the parameter is true to include the height of the outer margin (margin) section as shown below:

　　

This function belongs to the jquery object (instance) and is still valid for elements that are not visible

JQuery.fn.width ([value]) (Description: abbreviated)

JQuery.fn.innerWidth ([value]) (Description: abbreviated)

JQuery.fn.outerWidth ([Includemargin]) (Description: slightly)

To use the lonely Moon Blue Wind coloring detailed diagram

Next, analyze some of the functions.

A.jquery.fn.offset Analysis

The method for offset acquisition is as follows (take top as an example):

Offset.top = Elem from the top of the browser window + the portion of the document that is rolled up at the top of the –elem distance from the upper border of the parent element.

The jquery processing becomes:

  box = Elem.getboundingclientrect ();
  offset.top = Box.top + (Win.pageyoffset | | docelem.scrolltop)-(docElem.client Top | | 0);

There is a difference in modern browsers such as ie8-and ie9+, using Document.documentElement.getBoundingClientRect (); ie8-top/left value is -2px; other modern browsers top/ The left value is 0px; you can see that the ie8-browser is the origin coordinate of the window (2,2) coordinates.

The browser will default between the body and the window has 8px gap, so use Document.body.getBoundingClientRect (); The resulting top/left value is 8px.

Offset is set up as follows (take top as an example):

Note that before setting, if the current elem position is static, it is set to relative to process

First get the value of the CSS feature top that you want to set to Elem.

Settop = (offset top value to set-the offset top value of the current element) + elem CSS top feature value

Then set the settop to the Elem CSS top feature.

The processing of jquery becomes:

 var Curelem = jQuery (elem),
    curoffset = Curelem.offset (),
    curcsstop = Jquery.css (Elem, "top"),
    props = {}, Curposition = {}, curtop;
  If the top value is auto and position is absolute or fixed, you need to compute the value
  if (calculateposition) {
    curposition = for the current elem CSS feature top Curelem.position ();
    Curtop = Curposition.top;
  } else {
    curtop = parsefloat (curcsstop) | |;
  }
  if (options.top!= null) {
    props.top = (options.top-curoffset.top) + curtop;
  }
  Curelem.css (props);

B.jquery.fn.position

Position can only get cannot be set, get the following method (take top as an example):

Position.top = margintop value of Offsettop–elem of Elem's offsettop-elem-positioned ancestral elements

This top is really the value of the Elem CSS attribute top. For jquery, this elem the width+padding+border+margin as a whole, so the top in the end is elem this whole distance is defined as the distance of the upper inner edge of the ancestral element.

The processing of jquery has become:

var offsetparent, offset,
    parentoffset = {top:0, left:0},
    Elem = this[0];
  When the element for fixed positioning is his ancestral element is window window (parentoffset = {top:0, left:0}
  if (Jquery.css (Elem, "position") = = "fixed") { c5/>//assumes getboundingclientrect available
    offset = Elem.getboundingclientrect ();
  } else {
    //Get offsetparent
    offsetparent = This.offsetparent ();
    Get correct offsets
    offset = This.offset ();
    if (!jquery.nodename (offsetparent[0], "html")) {
      Parentoffset = Offsetparent.offset ();
    }
    Add Border
    parentoffset.top + + = Jquery.css (offsetparent[0], "bordertopwidth", True);
  }
  return {
    top:offset.top-parentoffset.top-jquery.css (elem, "margintop", True)
  };

Inside the jQuery.fn.offsetParent () function gets the nearest ancestor-positioning element.

 Offsetparent:function () {return
      This.map (function () {
        var offsetparent = this.offsetparent | | document.documentelement;
        while (offsetparent &&!jquery.nodename (offsetparent, "html") && Jquery.css (offsetparent, "position" = = = "Static")) {
          offsetparent = offsetparent.offsetparent;
        }
        return offsetparent | | document.documentelement;
      });    

C.jquery.fn.scrollleft and JQuery.fn.scrollTop

The two functions get and set the scroll bar position relatively simple, with scrolltop to get nothing more than two functions window[pageyoffset] or Elem [scrolltop]. Set directly using Window[scrollto] or elem[scrolltop]

The above content is small to introduce to you about jquery 1.9.1 Source Analysis Series (13) Location size operation, I hope you like.