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:
getClientRects和getBoundingClientRect差异
getClientRects
返回的其实是个数组,数组中有很多个类似getBoundingClientRect
返回的对象。getBoundingClientRect
返回的永远是最外框框的那个矩形区域相关的坐标偏移对象;而getClientRects
是多行文字区域的坐标偏移集合,在非IE浏览器下,只对inline的标签有反应。 一般getBoundingClientRect
方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。所以,下载你想用js获取元素的高宽尺寸,就可以试试getBoundingClientRect
方法了。
对getClientRects和getBoundingClientRect可以得到一个更好的说明.
getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象。 那么这个TextRectangle对象有什么用呢,用来开判断文本是否换行!或者说用来获取矩形区域相关的坐标偏移对象!
前端时间一直在做一个项目,有个功能类似新浪微博的用户信息卡:
当鼠标移到“@搜道网成都”时出现用户信息卡,当然这里的“@搜道网成都”是换行的,不换行的情况下,我们可以通过元素的偏移位置获取用户信息卡的位置,但是如果当行inline 素换行的时候他的盒子模型不在取决于他本身,而是取决于他的父级块元素:如图:
红框是换行的“@搜道网成都”的盒子模型,蓝框不换行的是“@搜道网南京美女时钟”的盒子模型:
类似类似新浪微博的用户信息卡的功能我们可以通过TextRectangle来实现,
TextRectangle数组的长度可知道文字是否换行,甚至是换了几行,
TextRectangle的几个属性和鼠标位置比较可以知道鼠标在哪一行上