getBoundingClientRect属性研究

概念

getBoundingClientRect 返回 width、height和下图中的6个属性

实测总结：

抓住一个核心点，就是height、width的值：

• box-sizing 是 content-box时，width和height = 内容+border+padding
• box-sizing是 border-box时， width和height = 我们设置的width、height

所以：

• top、left很好算，就是元素到左上角原点的距离
• bottom、right说白了就是在 top/left的基础上 加上 上面说的 height/width
• 另外一点需要注意的是：当页面有滚动条时，随着滚动条左右上下滚动，top、bottom、left、right都会跟着变；比如原来的top值是0，页面向上滚动了100px，那么top值就成了 -100

代码实测

box-sizing:content-box时

box-sizing:border-box时

有滚动条时

注意：

在看源码时，经常看到兼容性IE低版本的写法，了解即可，比如看popper.js源码时：

    /*** Get bounding client rect of given element* @function* @ignore* @param {HTMLElement} element* @return {Object} client rect*/function getBoundingClientRect(element) {var rect = element.getBoundingClientRect();// whether the IE version is lower than 11var isIE = navigator.userAgent.indexOf("MSIE") != -1;// fix ie document bounding top always 0 bugvar rectTop = isIE && element.tagName === 'HTML'? -element.scrollTop: rect.top;return {left: rect.left,top: rectTop,right: rect.right,bottom: rect.bottom,width: rect.right - rect.left,height: rect.bottom - rectTop};}