关于getBoundingClientRect 与 getClientRects -优快云博客

本文介绍了如何使用getBoundingClientRect和getClientRects方法来获取网页元素的位置信息和尺寸。getBoundingClientRect可用于获取元素相对于视口的位置，并且在Firefox中还提供了width和height属性。getClientRects则能帮助我们了解文本的布局情况，如行数、高度和宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getBoundingClientRect 可以用来获取元素相对视图左上角的位置。它的返回值是一个对象，包含4个属性：{top:0,left:0,bottom:0,right:0}，
——FirefoxV3.1+扩展了该对象，添加了width,height属性。
默认它是不计算页面的滚动距离的，跨浏览器的解决方案，可以参考jQuery的offset方法。

getClientRects 可以把一段文本是为"盒子"来处理。也就是说，可以用来计算一段文本的行数，高度、宽度。它的返回值是一个数组对象，
包含了TextRectangle 对象{top:0,left:0,bottom:0,right:0,width:0,height:0}。
IE支持block元素和inline元素里面文本.IE9+支持width、height属性。
其它浏览器仅支持 inline元素,对于block元素里面的文本，仅看做一个，数组包含一个TextRectangle对象。

例如：


    // 假如 这里的文本做10行显示。
    <span id="pp">这里是一大段文本</span>

    var pp = document.getElementById("pp");
    var aList = pp.getClientRects();
    console.log(aList.length);  // 10

    //------------------------------------------
    这里是一大段文本

    var pp = document.getElementById("pp");
    var aList = pp.getClientRects();
    console.log(aList.length);  // IE:10; 其它浏览器：1

更多资料，参考：
https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects
https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect
http://msdn.microsoft.com/zh-cn/subscriptions/downloads/hh779967.aspx
http://msdn.microsoft.com/zh-cn/subscriptions/downloads/hh780167.aspx