JavaScript DOM element size and location

  • 2020-05-27 04:27:50
  • OfStack

Gets the CSS size of the element

1. Get the size of the element inline through style


     var box = document.getElementById('box');    // Get the element ;
     box.style.width;                             // 200px;
     box.style.height;                            // 200px;

// PS:style gets only the width and height of the CSS style of the style property within the line, if any; If not, return null;

2. Get the size of the element by calculation


     var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
     style.width;                                // 200px;

// PS: gets the size of the element by calculation, regardless of whether it is inline or linked, it returns the calculated result;
// if you set the size itself, it will return the size of the element; If it is not set, non-IE will return the default size, and IE will return auto.

3. Get the size of the element through the cssRules(or rules) attribute in the CSSStyleSheet object;


     var sheet = document.styleSheets[0];            // To obtain link or style;
     var rule = (sheet.cssRules || sheet.rules)[0];  // For the first 1 rule ;
     rule.style.width;                               // 200px;

PS:cssRules can only get the width and height of inline and linked styles, not inline and calculated styles.

Conclusion: the above three methods of obtaining element size by CSS can only obtain the CSS size of the element, but not the actual size of the element itself. I'm going to add margin/scroll bar/border or something like that;

Get the actual size of the element

1. clientWidth and clientHeight

This set of attributes can get the size of the visual area of the element, including the space occupied by the element content and inner margin.
box.clientWidth; // 200;
PS: returns the element size, but no units. The default unit is px.
PS: for the actual size of the element,clientWidth and clientHeight understand as follows:
1. Increase the border of the element, no change,200;
2. Add the outer border of the element, no change,200;
3. Add scroll bar, the final value = original size - scroll bar size; 184;
4. Increase the inner margin, and the final value = the original size + the inner margin; 220;
PS: if width and height of CSS are not set, then non-IE will be calculated with the scrollbar and inner margin. IE returns 0;

2. scrollWidth and scrollHeight

This set of attributes can get the total height of the element content without the scrollbar;
box.scrollWidth;
// PS: returns the element size, the default unit is px; If none of CSS's width and height are set, it will get the calculated width and height;

3. offsetWidth and offsetHeight

This set of attributes can return the actual size of the element, including the border/inner margin and the scroll bar.
box.offsetWidth; 200
PS: returns the element size. The default unit is px. If no width and height of CSS are set, it will get the calculated width and height;
PS: the actual size of the element is understood as follows:
1. Increase the border, the final value = original size + border size; 220;
2. Increase the inner margin, and the final value = the original size + the inner margin; 220;
3. Add external data, no change;
4. Add scroll bar, no change, no decrease;

PS: for element size,1 is generally a block-level (block) element and it is convenient to set CSS size element.

Gets the size around the element

1. clientLeft and clientTop
// this set of attributes can get the size of the left and top border of the element;
box. clientLeft; // gets the width of the left border;

2.offsetLeft and offsetTop(offset)


//  This set of attributes gets the position of the current element border relative to the parent element border ;
  box.offsetLeft;                  // 50;
  // PS: Gets the current position of the element relative to its parent , It is best to set it to position position:absolute;
  // PS: Adding a border and padding doesn't affect its position , But it adds up ;

  box.offsetParent;                 //  Get the parent element ;
  // PS:offsetParent In the , If its parent element is <body>, non IE return body object ,IE return html object ;
  //  If two elements are nested , If the parent element does not use a location position:absolute, then offsetParent Will return body or html object ;

//  Let's say on many levels , The outer layer has been positioned , Access to any 1 The location of the element on the page , It can be achieved by continuously backtracking upward to obtain accumulation ;
  box.offsetTop+box.offsetParent.offsetTop;     //  Only two floors ;
  //  If you have multiple layers , You have to use loops or recursion ;
  function offsetLeft(element){
    var left = element.offsetLeft;        //  Get the first 1 The layer distance ;
    var parent = element.offsetParent;      //  Get the first 1 A parent ;
    while(parent !== null){            //  Judge if there is any more 1 Layer of the parent element ;
      left += parent.offsetLeft;        //  You add up the distances you get ;
      parent = parent.offsetParent;       //  Trace the parent element back as well ;
    }                       //  Then the cycle ;
    return left;                 //  We get the final distance ;
  }

3. scrollTop and scrollLeft


//  This set of properties gets the size of the area that is hidden by the scroll bar , You can also set the location to the region ;
  box.scrollTop;                  //  Gets the position above the scrolling content ;

//  Set the scroll bar to scroll to its original position ;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

4 getBoundingClientRect () method


//  This method returns 1 Rectangle objects , contains 4 A property :left/top/right and bottom;
//  Represents the distance between each edge of the element and the top and left sides of the page, respectively ;
  var box = document.getElementById('box');
  alert(box.getBoundingClientRect().top);    //  The distance between the top of the element and the top of the page ;
  alert(box.getBoundingClientRect().right);   //  The distance between the right of the element and the left of the page ;
  alert(box.getBoundingClientRect().bottom);   //  The distance between the bottom of the element and the top of the page ;
  alert(box.getBoundingClientRect().left);    //  The distance from the left of the element to the left of the page ;
  // PS:IE/Firefox/Opera/Chrome/Safari All support ;
  //  But in the IE In the , Default coordinates from (2,2) Start counting , As a result, the final distance is two pixels longer than in other browsers ;
  document.documentElement.clientTop;      //  non IE for 0,IE for 2;
  document.documentElement.clientLeft;      //  non IE for 0,IE for 2;
//  Compatible with getBoundingClientRect()
  function getRect(element){
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
      top:rect.top-top,           //  Top edge - The top margin of the page (0-0 or 2-2);
      bottom:rect.bottom-top,
      left:rect.left-left,         //  Element left margin - The left margin of the page (0-0 or 2-2);
      right:rect.right-left
    }
  };

5 subtotal

1. Offset (offset dimension): includes all the visible space occupied by the element on the screen;
The visible size of an element is determined by its height and width, including inner margin/scroll bar and border;
2. Size of customer area (client dimension): refers to the space occupied by element content and its inner margins;
3. Scroll size (scroll dimension): the size of the element containing the scroll content;


Related articles: