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： http://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的几个属性和鼠标位置比较可以知道鼠标在哪一行上

转载于:https://www.cnblogs.com/shihao/archive/2011/12/23/2299046.html