getClientRects 和 getBoundingClientRect 的区别

TextRectangle

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

看下图(截图来源ppk):

200812181810.jpg
一行连续的文本

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

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

理解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. 这样就不需要向上遍历来计算对象的相对坐标了。

[本日志由 puterjam 于 2008-12-18 06:17 PM 编辑]
上一篇: IE8 支持 Alternative style sheets
下一篇: FireUnit - 基于firebug的单元测试工具
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: TextRectangle
相关日志:
评论: 7 | 引用: 0 | 查看次数: -
tomliao[2009-03-28 11:21 PM | | | 222.240.162.72 | del | 回复回复]
不是很懂啊
tomliao[2009-03-28 11:12 PM | | | 222.240.162.72 | del | 回复回复]
不懂啊
看看[2008-12-29 04:04 PM | | | 222.168.42.51 | del | 回复回复]
很棒啊
顺便来看看冷笑话
用户名qwfy[2008-12-22 09:11 PM | | | 211.136.222.90 | del | 回复回复]
老大,我用同样手机.登同样版本.官方的怎么可以评论呢?自己的不行
三脚猫[2008-12-19 06:59 PM | | | 121.229.125.250 | del | 回复回复]
PJhome的技术是顶尖的。nj007.cn
lin[2008-12-19 03:43 PM | | | 119.137.161.200 | del | 回复回复]
子舜哥,出本书来讲解Pjblog的开发流程和使用的各种技术吧,笼罩在失败的中国式教育的孩子们就看你的了,我相信这书一定会很畅销的
期待期待...
SEURC[2008-12-19 03:12 PM | | | 120.68.152.21 | del | 回复回复]
貌似区别不大,欢迎到我的博客看看
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱:
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭