getClientRects 和 getBoundingClientRect 的用法和区别

getClientRects获取元素占据页面的所有矩形区域 

描述

获取元素占据页面的所有矩形区域。语法    var rectCollection = object.getClientRects();

值

getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了, top left bottom right width height 六个属性TextRectangle对于文本对象，W3C提供了一个 TextRectangle 对象，这个对象是对文本区域的一个解释。这里的文本区域只针对inline 元素，比如：a, span, em这类标签元素。浏览器差异getClientRects() 最先由MS IE提出，后被W3C引入并制订了标准。目前主流浏览器都支持该标准，而IE只支持TextRectangle的top left bottom right四个属性。IE下可以通过right-left来计算width、bottom-top来计算height。ie 和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小， 只有display:inline的对象才能获取到TextRectangleList，例如em i span 等标签。应用场景getClientRects常用于获取鼠标的位置，如放大镜效果。微博的用户信息卡也是通过改方法获得的。

---------------------------------------------------------

getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。下面这是MSDN对document.documentElement.getBoundingClientRect的解释：SyntaxoRect = object.getBoundingClientRect()Return ValueReturns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.RemarksThis method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。所以你不用当心浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，不够可以通过以下方法来获取width,height的值：

    var ro = object.getBoundingClientRect();    var Width = ro.right - ro.left;    var Height = ro.bottom - ro.top;兼容所有浏览器写法：    var ro = object.getBoundingClientRect();    var Top = ro.top;    var Bottom = ro.bottom;    var Left = ro.left;    var Right = ro.right;    var Width = ro.width||Right - Left;    var Height = ro.height||Bottom - Top;有了这个方法，获取页面元素的位置就简单多了:    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;    var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

-------------------------------

getClientRects 和 getBoundingClientRect 的区别返回类型差异：getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。getBoundingClientRect 返回 一个TextRectangle对象，即使DOM里没有文本也能返回TextRectangle对象.浏览器差异:除了safari，firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect，firefox 3.1给TextRectangle增加了 width 和 height。ie 和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小， 只有display:inline的对象才能获取到TextRectangleList，例如em i span 等标签。通过测试，至少Chrome 2+\Safari 4\Firefox3.5\0pera 9.63+已经支持getBoundingClientRect方法。使用场景差异:出于浏览器兼容的考虑，现在用得最多的是getBoundingClientRect，经常用来获取一个element元素的viewport坐标。 网上的例子http://www.360doc.com/content/10/1201/16/3877783_74068281.shtml

http://www.thinksaas.cn/group/explore/index.php?app=group&ac=topic&id=19176

转载于：http://blog.sina.com.cn/s/blog_70a3539f0102vvnd.html