Get the DOM element size and position in JavaScript

This is the fifth day of my participation in the August Wen Challenge.More challenges in August

The browser used in this case is Chrome.

1. Get the CSS size of the element

1.1 Get the inline style of an element

<script>
  function boxInfo(){
    let box = document.getElementById('box');
    let w = box.style.width;
    let h = box.style.height;
    console.log(w,h) // 700px 800px
  }
</script>

<body>
  <div id="box" style="width: 700px; height:800px; background-color: pink;"></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

Just display the values in the style property

1.2 Obtaining the computed style

<style>
  #box{
    width: 700px;
    height: 800px;
    padding: 10px;
    background-color: pink;
    border: 1px solid red;
  }
</style>

<script>
  function boxInfo(){
    var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
    let w = style.width;
    let h = style.height;
    console.log(w,h) // 700px 800px
  }
</script>

<body>
  <div id="box" ></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

Note: If you do not set the width and height of the element, the default width and height is returned in non-Ie browsers, and the auto string is returned under IE;

1.3 Get the styles written by the < link > and < style > tags

<style>
  #box{
    width: 700px;
    height: 800px;
    padding: 10px;
    background-color: pink;
    border: 1px solid red;
  }
</style>

<script>
  function boxInfo(){
    var sheet = document.styleSheets[0];
    var rule = (sheet.cssRules || sheet.rules)[0];
    let w = rule.style.width;
    let h = rule.style.height;
    console.log(w,h) // 700px 800px
  }
</script>

<body>
  <div id="box" ></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

CssRules (or rules) can only get the width and height of inline and linked styles, not inline and computed styles.

GetComputedStyle, element.style

Similarities:

All CSSStyleDeclaration objects are returned, and the corresponding property values are written in CSS camel style. Note the float property.

Difference:

Style reads only the inline style of the element, that is, the style written on the element’s style property; GetComputedStyle reads the final style, including inline style, embedded style, and external style.
Element. style supports both reading and writing, while getComputedStyle only supports reading but not writing.

We can read styles using getComputedStyle and modify styles using element.style.

Summary: The above three CSS methods can only get the CSS size of an element, but not the actual size of the element itself. Add padding, scrollbars, borders and so on.

2. Get the actual size of the element

2.1 clientWidth and clientHeight

This set of attributes captures the size of the element’s viewable area, and how much space is occupied by the element’s content and inner margins. The default unit is px. If you force a unit, such as 100em, it will still return the size of px. For the actual size of an element, clientWidth and clientHeight are understood as follows:

A. Add border without change;
B. Increase the margin without change;
C. Increase the inner margin and the final value is equal to the original size plus the size of the inner margin;
D. Add the scrollbar. The final value is equal to the original size minus the scrollbar size.

<style>
  #box{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;  /* corresponding to a understanding, result: 200,200 */
    margin: 10px;           /* corresponding to b understanding, result: 200,200*/
    padding: 20px;          /* corresponding to c understanding, result: 240,240*/
    overflow: scroll;       /* corresponding to d, result: 223,223,223 =200 (CSS size) +40 (inside margins) -17 (scroll bar width) */
  }
</style>

<script>
  function boxInfo(){
    var box = document.getElementById("box");
    let w = box.clientWidth;
    let h = box.clientHeight;
    console.log(w,h) / / 223 223
  }
</script>

<body>
  <div id="box" ></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

Note: If you do not set any CSS width and height, non-IE browsers will count the scrollbar and inner margins calculated, while IE will return 0 (IE8 fixed).

2.2 scrollWidth, scrollHeight

ScrollWidth: Returns the overall width of the element, including invisible parts that cannot be displayed on the page due to overflow; ScrollHeight: Returns the overall height of the element, including invisible parts that cannot be displayed on the page due to overflow;

For the actual size of the element, scrollWidth and scrollHeight are understood as follows:

The following works in IE8, but not in IE6: a. Firefox and Opera increase the size of the border. B. Internet Explorer, Chrome, and Safari ignore the border size; C. Internet Explorer only displays the height of its original content.
If I increase the margin, it’s going to be equal to the original size plus the margin size;
If I increase the scrollbar, it’s going to be equal to the original size minus the scrollbar size;
Increase the margin without change;
Add content overflow. Firefox, Chrome, and IE get the actual content height. Opera gets less height than the first three browsers, and Safari gets more height than the first three browsers.

<style>
  #wrap{
    width: 200px;
    height: 200px;
    background-color: blue;
    padding: 20px;
    overflow: auto;
    border: 1px solid green; 
  }
  #box{
    width: 400px;
    height: 400px;
    padding: 10px;
    background-color: pink;
    border: 1px solid red;
    margin: 20px;                 
  }
</style>

<script>
  function boxInfo(){
    let box = document.getElementById("box");
    console.log(box.scrollWidth,box.scrollHeight) / / 420 420
  }
</script>

<body>
  <div id="wrap">
    <div id="box"></div>
  </div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

2.3 offsetWidth and offsetHeight

This set of attributes returns the actual size of the element, including the border, inner margin, and scroll bar. Returns the size of the element. The default unit is px. If you do not set any CSS width and height, you will get the calculated width and height. For the actual size of an element, offsetWidth and offsetHeight are understood as follows:

If I increase the border, the final value is equal to the original size plus the border size;
If I increase the margin, it’s going to be equal to the original size plus the margin size;
Increase the margin without change;
Increase the scroll bar, no change, will not reduce;

For element sizes, it is usually easier to get block-level elements with CSS sized elements. This is especially troublesome if the element is inline or has no size set, so it is recommended to use it with care.

<style>
  #box{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;       /* Result: 210,210*/
    margin: 10px;                /* Result: 210,210 (no change) */
    padding: 20px;              /* Result: 250,250*/
    overflow: scroll;          /* Result: 250,250 (no change) */
  }
</style>

<script>
  function boxInfo(){
    var box = document.getElementById("box");
    let w = box.offsetWidth;
    let h = box.offsetHeight;
    console.log(w,h) / / 250 250
  }
</script>

<body>
  <div id="box" ></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

3. Get the surrounding size (position) of the element

3.1 clientLeft, clientTop

Gets the size of the Left and Top border set for the element (0 if not set). Currently, only the Left and Top groups are provided, and Right and Bottom are not provided. If the width of the four edges is different, it can be obtained directly by calculating the style or by subtracting the size of the elements in the above three groups.

Width of right border: div.offsetwidth - div.clientWidth - div. ClientLeft Width of bottom border: div.offsetheight - div.clientheight - div.clientTopCopy the code

<style>
  #box{
    width: 200px;
    height: 200px;
    border-top: solid 10px red;
    border-right: solid 20px #00ff00;
    border-bottom: solid 30px blue;
    border-left: solid 40px #808080;
  }
</style>

<script>
  function boxInfo(){
    var box = document.getElementById("box");
    console.log(box.clientLeft,box.clientTop) / / 40 10
  }
</script>

<body>
  <div id="box" ></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

3.2 the offsetLeft and offsetTop

This set of attributes gets the position of the current element relative to the parent element. It is best to set it to position: Absolute, otherwise different browsers will interpret it differently.

<style>
  #box{
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;        /* Set position to absolute and all browsers return the same value */
    left: 30px;
    top: 20px;
    padding: 10px;            /* 30 20 plus the inner margin does not affect its position */
    border: 1px solid red;    /* 30 20 plus the border, does not affect its position */
    margin: 50px;             /* 80, 70 plus the margin, the position value will add up to */
  }
</style>

<script>
  function boxInfo(){
    var box = document.getElementById("box");
    console.log(box.offsetLeft, box.offsetTop) / / 80 70
  }
</script>

<body>
  <div id="box" ></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

3.3 scrollTop, scrollLeft

ScrollLeft: Reads and writes the scrolling distance to the left of the element, the distance between the left edge of the element and the leftmost portion of the currently visible content in the element; ScrollTop: Reads and writes the scrolled distance at the top of the element, the distance between the top edge of the element and the top of the currently visible content in the element;

These two properties can only be used in element to set the CSS class of the overflow, or doesn’t make any sense to these two properties, and the value of the overflow for visiblehidden, auto, scroll;
When setting the values of these two parameters, you can use numbers directly, otherwise it will not work;

<style>
  #wrap{
    width: 300px;
    height: 300px;
    background-color: blue;
    padding: 20px;
    overflow: auto;
    border: 1px solid green; 
  }
  #box{
    width: 400px;
    height: 400px;
    background-color: pink;
    padding: 10px;    
    border: 1px solid red;    
    margin: 50px;            
  }
</style>

<script>
  function boxInfo(){
    var wrap = document.getElementById("wrap");
    wrap.scrollLeft = 100;  // Set the width of the roll out area on the left of the box to 100 pixels
    wrap.scrollTop = 100;   // Set the height of the roll out area at the top of the box to 100 pixels
    console.log(wrap.scrollLeft, wrap.scrollTop)  / / 100 100
  }
</script>

<body>
  <div id="wrap">
    <div id="box" ></div>
  </div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

3.4 the offsetParent

Get the parent element;

If the parent element is < body >, non-IE returns the body object and IE (IE6) returns the HTML object. If two elements are nested, offsetParent returns either a body object or an HTML object if the parent element does not use position:absolute. So CSS positioning is important when you get offsetLeft and offsetTop.

At many levels, the outer layer is already located. How do we get the distance between the inner element and the body or HTML element? That is, get the position of any element on the page. So we can write a function that just keeps going back and forth to get the sum.

<style>
  #wrap{
    width: 300px;
    height: 300px;
    background-color: blue;
    padding: 20px;
    border: 1px solid green; 
    position: absolute;
    top:50px;
    left: 10px;
  }
  #box{
    width: 100px;
    height: 100px;
    background-color: pink;   
    border: 1px solid red;               
  }
</style>

<script>
  function boxInfo(){
    var box = document.getElementById("box");
    var left = box.offsetLeft;          // Get the first distance
    var parent = box.offsetParent;     // Get the first parent element
    while(parent ! = =null) {         // If there is a parent element
      left += parent.offsetLeft;      // Add the distance of this layer
      parent = parent.offsetParent;  // Get the parent element of this layer
    }
    console.log(left) / / 30
    return left;
  }
</script>

<body>
  <div id="wrap">
    <div id="box"></div>
  </div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

3.5 getBoundingClientRect ()

Returns a rectangular object with four attributes, left, top, right, and bottom, representing the distance between each edge of the element and the top and left sides of the page.

Note: Internet explorer, Firefox3+, Opera9.5, Chrome, Safari support. In IE, the default coordinates are calculated from (2,2), resulting in a final distance of two pixels more than other browsers, which we need to make compatible.

<style>
  *{
    margin:0px;
  }
  #box{
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    background-color: pink;   
    border: 1px solid red;               
  }
</style>

<script>
  function boxInfo(){
    let box = document.getElementById("box");
    let top = box.getBoundingClientRect().top;           // The distance between the top of the element and the top of the page
    let bottom = box.getBoundingClientRect().bottom;     // The distance between the bottom of the element and the top of the page
    let left = box.getBoundingClientRect().left;         // The distance between the left of the element and the left of the page
    let right = box.getBoundingClientRect().right;       // The distance between the right of the element and the left of the page
    
    console.log(top,bottom,left,right) // 10 132 10 132
  }
</script>

<body>
  <div id="box"></div>
  <button onclick="boxInfo()">test</button>
</body>
Copy the code

Get the DOM element size and position in JavaScript

1. Get the CSS size of the element

2. Get the actual size of the element

3. Get the surrounding size (position) of the element

Related Posts

C++ [keyboard read operation], two ways to do small games control joystick

Big Front End Advanced series – implement your own scaffolding from scratch

You don’t know how to optimize your website speed