CSSOM之getboundingclientrect和getclientrects

标签：换行   获取   支持   bsp   isp   rectangle   css   相对   image   

TextRectangle

对于文本对象，W3C提供了一个 TextRectangle 对象，这个对象是对文本区域的一个解释。

对于 i,span,em等display 是inline的标签，在书写文本的时候可能存在换行，像下图：

每个红色的框，就是一个TextRectangle对象。

使用 getClientRects() 方法可以得到一个TextRectangle 的list。 每个对象代表一个红框

如果使用 getBoundingClientRect(). 则会得到一个包含这4个红框的一个最小矩形,当然也是一个TextRectangle对象。

如果把em display设置成inlineblock，那么 无论调用者两个方法中的哪一个，都只返回一个TextRectangle对象。

浏览器差异

除了safari，firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect，
firefox 3.1给TextRectangle增加了 width 和 height。

ie 和非ie浏览器在使用getClientRects还是有些差别的，ie获取TextRectangleList的范围很大。而非ie获取的范围比较小， 只有display:inline的对象才能获取到TextRectangleList，例如em i span 等标签。

使用场景

现 在用得最多的是getBoundingClientRect，这个直接返回一个TextRectangle,其实大家经常使用它来获取到一个 element的viewport坐标.其实就算dom里面没有文本也能返回一个 TextRectangle. 这样就不需要向上遍历来计算对象的相对坐标了。

CSSOM之getboundingclientrect和getclientrects

标签：换行   获取   支持   bsp   isp   rectangle   css   相对   image   

原文地址：http://www.cnblogs.com/btgyoyo/p/6160007.html