转自:http://www.pjhome.net/article/Javascript/928.htm
TextRectangle
对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释。
看下图(截图来源ppk):
[img]http://www.pjhome.net/attachments/month_0812/u20081218181425.jpg[/img]
一行连续的文本
[img]http://www.pjhome.net/attachments/month_0812/520081218181430.jpg[/img]
我们可以获取到里面的5行文字,红色框就是TextRectangle这个抽象的对象.
TextRectangle对象包含了, top left bottom left四个属性,这四个属性都是对应可视区域viewport的
[img]http://www.pjhome.net/attachments/month_0812/l20081218181544.jpg[/img]
理解TextRectangle后,对getClientRects和getBoundingClientRect可以得到一个更好的说明.
getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象。
[color=blue]getBoundingClientRect取得到的位置只是该对象相对于窗体中可视区域的位置,并不包含在页面滚动中位置。[/color]
浏览器差异:
除了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. 这样就不需要向上遍历来计算对象的相对坐标了。
TextRectangle
对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释。
看下图(截图来源ppk):
[img]http://www.pjhome.net/attachments/month_0812/u20081218181425.jpg[/img]
一行连续的文本
[img]http://www.pjhome.net/attachments/month_0812/520081218181430.jpg[/img]
我们可以获取到里面的5行文字,红色框就是TextRectangle这个抽象的对象.
TextRectangle对象包含了, top left bottom left四个属性,这四个属性都是对应可视区域viewport的
[img]http://www.pjhome.net/attachments/month_0812/l20081218181544.jpg[/img]
理解TextRectangle后,对getClientRects和getBoundingClientRect可以得到一个更好的说明.
getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象。
[color=blue]getBoundingClientRect取得到的位置只是该对象相对于窗体中可视区域的位置,并不包含在页面滚动中位置。[/color]
浏览器差异:
除了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. 这样就不需要向上遍历来计算对象的相对坐标了。