getBoundingClientReact方法

随笔2018-03-201 分钟jsgetBoundingClientRect
getBoundingClientRect方法兼容IE7写法
rectObject = object.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置

ie7中的getBoundingClientRect方法只有bottom、left、right、top属性,没有width合height

图片

通过上图可以看出: 除了width和height,其它几个属性都是相对于视口的左上角而言的。

根据left、right的值可以推算出width

根据top、bottom的值可以推算出height

完整的代码如下:

/**
 * getBoundingClientRect 兼容IE7
 * @param {DOM Object} obj 
 */
function getBoundingClientRect(obj) {
    var boundingClientRect = obj.getBoundingClientRect();
    var newObj = {
        bottom: boundingClientRect.bottom,
        left: boundingClientRect.left,
        right: boundingClientRect.right,
        top: boundingClientRect.top
    }

 if (boundingClientRect.width) {
  newObj.width = boundingClientRect.width;
  newObj.height = boundingClientRect.height;
 } else {
  newObj.width = boundingClientRect.right - boundingClientRect.left;
  newObj.height = boundingClientRect.bottom - boundingClientRect.top;
    }
 return newObj;
}

相关链接

getBoundingClientRect