What is the function of getBoundingClientRect in js?

This article mainly introduces the role of getBoundingClientRect in js and a detailed explanation of the compatibility solution. Now I share it with you and give it a reference.

1. The role of getBoundingClientRect

getBoundingClientRect is used to obtain the position set of an html element relative to the window.

Executing object.getBoundingClientRect(); will get the top, right, bottom, left, width, and height attributes of the element. These attributes are returned as an object.

getBoundingClientRect()

This method returns a rectangular object containing four properties: left, top, right and bottom. Represents the distance between each side of the element and the top and left sides of the page respectively.

var box=document.getElementById('box'); // 获取元素

alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

2. Explanation of the up, down, left, and right attribute values ​​of getBoundingClientRect

Mainly explain left and bottom. Left refers to the distance from the right to the far left of the page, and bottom refers to The distance from the bottom edge to the top edge of the page.

Look at the picture:

3. Browser compatibility

ie5 and above can be supported, but A few things need to be corrected.

The left and top of IE67 will be 2px less, and there will be no width or height attributes.

4. Use getBoundingClientRect to write a method to obtain the position set of html elements relative to the window

<p id="test" style="width: 100px; height: 100px; background: #ddd;"></p>
<script>
 function getObjXy(obj){
  var xy = obj.getBoundingClientRect();
  var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
   bottom = xy.bottom,
   left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
   right = xy.right,
   width = xy.width||right - left, //IE67不存在width 使用right - left获得
   height = xy.height||bottom - top;

  return {
   top:top,
   right:right,
   bottom:bottom,
   left:left,
   width:width,
   height:height
  }
 }

 var test = getObjXy(document.getElementById(&#39;test&#39;));
 alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
</script>

The above is what I compiled for everyone. I hope it will be useful to everyone in the future. helpful.

Related articles:

Number type in JS (detailed tutorial)

How to use the browser plug-in Batarang in Angular

Preload watch usage in vue

The above is the detailed content of What is the function of getBoundingClientRect in js?. For more information, please follow other related articles on the PHP Chinese website!