getClientRects 和 getBoundingClientRect 的用法和区别

素颜马尾好姑娘i 2022-06-08 01:50 321阅读 0赞

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的解释：  
  
Syntax  
  
oRect = object.getBoundingClientRect()  
  
Return Value  
  
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.  
  
Remarks  
  
This 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