前端好用API之getBoundingClientRect

前情

在前端开发需求中，经常需要获取元素的尺寸位置相关的属性，以往的做法是调用不同api获取相关属性的。

getBoundingClientRect介绍

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

标准盒子模型：元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，则元素的的尺寸等于 width/height。

top, left, right, bottom属性是使用对象的其他属性的值来计算获得的，Object.keys（）查找时将失败，Object.assign（）无法复制返回的属性

调用方式：

domRect = element.getBoundingClientRect();

domRect对象介绍

domRect	这个对象是由该元素的 getClientRects()方法返回的一组矩形的集合
left	元素左边距离浏览器可视窗左边的距离
right	元素右边距离浏览器视可视窗左边的距离
top	元素顶边距离浏览器视可视窗顶边的距离
bottom	元素底边距离浏览器视可视窗顶边的距离
width	元素自身的宽
height	元素自身的高
x	元素左边距离浏览器可视窗左边的距离
y	元素顶边距离浏览器可视窗顶边的距离

考虑到兼容性问题，尽量仅使用 left, top, right, 和 bottom属性是最安全的

使用示例

  
  
  
	


	

    
DOM0
    
DOM1
    
DOM2
    
DOM3
  
  
拖动滚动条查看值变化：
  

    DOM2元素：
  
	

演示地址：https://jsbin.com/wozabey/1/edit?html,css,js,output