就爱编程论坛

标题: getClientRects 和 getBoundingClientRect 的区别 [打印本页]

作者: admin 时间: 2011-7-8 20:17:04 标题: getClientRects 和 getBoundingClientRect 的区别

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

看下图(截图来源ppk):

一行连续的文本

我们可以获取到里面的5行文字，红色框就是TextRectangle这个抽象的对象.

TextRectangle对象包含了, top left bottom left四个属性，这四个属性都是对应可视区域viewport的

理解TextRectangle后，对getClientRects和getBoundingClientRect可以得到一个更好的说明.

getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。
getBoundingClientRect 返回一个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. 这样就不需要向上遍历来计算对象的相对坐标了。

欢迎光临就爱编程论坛 (http://bbs.waibc.com/)