-
div+css视频教程之TextRectangle 对象
TextRectangle 对象
指定包含元素或 TextRange 对象中一行文本的矩形。
成员表
下面的表格列出了 TextRectangle 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。
SHOW: 属性
属性
注释
对一个元素或文本范围对象应用 getClientRects 方法可以获得一个 TextRectangle 对象的集合。getClientRects 方法返回一个矩形的集合，其中包括每个矩形相对于客户区的上、下、左、右的坐标。
在下面取自徐志摩《再别康桥》的诗句中，b 元素(粗体文本)中共包含四个 TextRectangle 对象。
<P>悄悄的<B>我走了，<BR> 正如我悄悄的来；<BR> 我挥一挥衣袖，<BR> 不带走</B>一片云彩。 </P>
这四个 TextRectangle 对象是:
- “我走了，”
- “正如我悄悄的来；”
- “我挥一挥衣袖，”
- “不带走”
如果你更改包含此文本的窗口的大小，TextRectangle 对象不会更新。由于对象是布局的快照，应该在 onresize 事件触发后随之更新对象。
TextRectangle 的宽度可能与其包含的 TextRange 的宽度并不相等。因为 TextRange 与文本的宽度相等，而 TextRectangle 却与包含文本的元素宽度相等。
此对象在 Microsoft® Internet Explorer 5 的脚本中可用。
示例
下面的例子演示了如何使用 getClientRects 和 getBoundingClientRect 方法突出显示对象中的文本行。
SHOWExample
<HEAD> <SCRIPT> var rcts; var keyCount=0; function Highlight(obj) { rcts = obj.getClientRects(); rctLength= rcts.length; if (keyCount > rctLength-1) { idBeige.style.display="none"; keyCount = 0 } // 设置黄色 DIV 的渲染属性 cdRight = rcts[keyCount].right + idBody.scrollLeft; cdLeft = rcts[keyCount].left + idBody.scrollLeft; cdTop = rcts[keyCount].top + idBody.scrollTop; cdBottom = rcts[keyCount].bottom + idBody.scrollTop; idYellow.style.top = cdTop; idYellow.style.width = (cdRight-cdLeft) - 5; idYellow.style.display = 'inline'; // 设置土色 DIV 的渲染属性 bndRight = obj.getBoundingClientRect().right + idBody.scrollLeft; bndLeft = obj.getBoundingClientRect().left + idBody.scrollLeft; bndTop = obj.getBoundingClientRect().top + idBody.scrollTop; idBeige.style.top = bndTop; idBeige.style.width = (bndRight-bndLeft) - 5; idBeige.style.height = cdTop - bndTop; if (keyCount>0){ idBeige.style.display = 'inline'; } keyCount++; } </SCRIPT> </HEAD> <BODY ID="idBody"> <DIV ID="oID_1" onclick="Highlight(this)" onkeydown="Highlight(this)"> 在此会有大量的文本。如果多次单击此处的文本， 将会看到每单击一次鼠标，就会有一行被突出显示。 如果每行都被突出显示了，这个过程就会从第一行 重新开始。 </DIV> <DIV STYLE="position:absolute; left:5; top:400; z-index:-1; background-color:yellow; display:none" ID="idYellow"></DIV> <DIV STYLE="position:absolute; left:5; top:400; z-index:-1; background-color:beige; display:none" ID="idBeige"></DIV> </BODY>下面的例子是用了 TextRectangle 集合和 getClientRects 及 getBoundingClientRect 方法决定元素中文本矩形的位置。在行中左对齐的文本并不扩展到包含文本的外框的右边。使用此集合，你可以确定仅仅围绕在每行内容外侧的矩形的坐标。示例代码将读取这些矩形的坐标并演示一个小球只在文本处划过，而不是行尾。
