getClientRects方法返回的TextRectangle对象

W3C提供了一个文本的TextRectangle 对象,这个对象是对文本区域的一个解释。这里的文本区域只针对inline 元素,比如:a, span, em这类标签元素,例如这样的一个页面表现:

 

id为temp中有个span元素,那么我们可以通过getClientRects方法取得这样3个TextRectangle对象(红框):
TextRectangle的组成为键值对,主要有包括:
{
top : (number)
bottom?: (number)
left?: (number)
right?: (number)
width?: (number)
height?: (number)
}
查看demo:https://www.css88.com/demo/TextRectangle/index.html

getClientRects和getBoundingClientRect差异
getClientRects返回的其实是个数组,数组中有很多个类似getBoundingClientRect返回的对象。getBoundingClientRect返回的永远是最外框框的那个矩形区域相关的坐标偏移对象;而getClientRects是多行文字区域的坐标偏移集合,在非IE浏览器下,只对inline的标签有反应。

一般getBoundingClientRect方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。所以,下载你想用js获取元素的高宽尺寸,就可以试试getBoundingClientRect方法了。

对getClientRects和getBoundingClientRect可以得到一个更好的说明.

getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象。

那么这个TextRectangle对象有什么用呢,用来开判断文本是否换行!或者说用来获取矩形区域相关的坐标偏移对象!
前端时间一直在做一个项目,有个功能类似新浪微博的用户信息卡:
当鼠标移到“@搜道网成都”时出现用户信息卡,当然这里的“@搜道网成都”是换行的,不换行的情况下,我们可以通过元素的偏移位置获取用户信息卡的位置,但是如果当行inline?素换行的时候他的盒子模型不在取决于他本身,而是取决于他的父级块元素:如图:
红框是换行的“@搜道网成都”的盒子模型,蓝框不换行的是“@搜道网南京美女时钟”的盒子模型:
类似类似新浪微博的用户信息卡的功能我们可以通过TextRectangle来实现,
TextRectangle数组的长度可知道文字是否换行,甚至是换了几行,
TextRectangle的几个属性和鼠标位置比较可以知道鼠标在哪一行上
。。。。。
感谢新浪微博的朋友!
赞(0) 打赏
未经允许不得转载:WEB前端开发 » getClientRects方法返回的TextRectangle对象

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    IE8下width 和height undefind了

    jack7年前 (2011-11-25)回复
  2. #-48

    demo么有效果,我的是IE8

    lion7年前 (2011-11-26)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏