getBoundingClientRect()

最新推荐文章于 2025-11-08 18:06:06 发布

原创最新推荐文章于 2025-11-08 18:06:06 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript中的getBoundingClientRect方法来获取DOM元素的位置和尺寸，并提供了兼容IE6~IE8的实现方式。

1、语法

var rect=el.getBoundingClientRect();

2、返回值

返回一个包含left、top、right、bottom、width、height值的矩形对象。

这里写图片描述

注：
width和height：ie9及以上支持width/height属性。
兼容ie6~ie8的width/height的写法：

return{
    width:rect.right-rect.left,
    height:rect.bottom-rect.top
}

3、兼容性

pc端：
这里写图片描述

移动端：
这里写图片描述
（图片及文章参考：http://www.cnblogs.com/Songyc/p/4458570.html）

在ie7及ie7以下的html元素坐标会从(2, 2)开始算起，所以在ie7及ie7以下left和top会多出两个像素。
用 document.documentElement.clientLeft 和 document.documentElement.clientTop 做兼容
（ie7及以下document.documentElement.clientLeft = document.documentElement.clientTop=2，
而ie8及以上 document.documentElement.clientLeft = document.documentElement.clientTop=0）

完整兼容写法如下：

function getRect(el){

    var rect=el.getBoundingClientRect();
    var _left=document.documentElement.clientLeft;
    var _top=document.documentElement.clientTop;

    return{
        left:rect.left-_left,
        top:rect.top-_top,
        right:rect.right-_left,
        bottom:rect.bottom-_top,
        width:rect.right-rect.left,
        height:rect.bottom-rect.top
    }
}