getBoundingClientReact方法

getBoundingClientRect方法兼容IE7写法

代码语言：javascript复制

rectObject = object.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置

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

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

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

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

完整的代码如下：

代码语言：javascript复制

/**
 * 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

height width

0 人点赞