设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 409|回复: 0
打印 上一主题 下一主题

getClientRects 和 getBoundingClientRect 的区别 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-7-8 20:17:04 |只看该作者 |倒序浏览
    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. 这样就不需要向上遍历来计算对象的相对坐标了。
    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-2 18:40 , Processed in 0.095173 second(s), 27 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部