textrange 对象 tfoot 元素 | tfoot 对象 中文DHTML教程
指定包含元素或 TextRange 对象中一行文本的矩形。
DHTML元素属性列表
注释
对一个元素或文本范围对象应用 getclientrects 方法可以获得一个 TextRectangle 对象的集合。getClientRects 方法返回一个矩形的集合,其中包括每个矩形相对于客户区的上、下、左、右的坐标。
在下面取自徐志摩《再别康桥》的诗句中,b 元素(粗体文本)中共包含四个 TextRectangle 对象。
<P>悄悄的<B>我走了,<BR> 正如我悄悄的来;<BR> 我挥一挥衣袖,<BR> 不带走</B>一片云彩。 </P>这四个 TextRectangle 对象是:
- “我走了,”
- “正如我悄悄的来;”
- “我挥一挥衣袖,”
- “不带走”
如果你更改包含此文本的窗口的大小,TextRectangle 对象不会更新。由于对象是布局的快照,应该在 onresize 事件触发后随之更新对象。
TextRectangle 的宽度可能与其包含的 TextRange 的宽度并不相等。因为 TextRange 与文本的宽度相等,而 TextRectangle 却与包含文本的元素宽度相等。
此对象在 Microsoft® Internet Explorer 5 的脚本中可用。
DHTML代码举例
下面的例子演示了如何使用 getClientRects 和 getBoundingClientRect 方法突出显示对象中的文本行。
<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 方法决定元素中文本矩形的位置。在行中左对齐的文本并不扩展到包含文本的外框的右边。使用此集合,你可以确定仅仅围绕在每行内容外侧的矩形的坐标。示例代码将读取这些矩形的坐标并演示一个小球只在文本处划过,而不是行尾。
<HEAD> <SCRIPT> var timid = -1; var timoID_2 = -1; var nLine; var nPosInLine; var oRcts; var nDivLen; var nEraser; function LoadDone() { oTextRange = document.body.createTextRange(); // 获得范围的绑定矩形 oRcts = oTextRange.getClientRects(); nLine = 0; oBndRct = obj.getBoundingClientRect(); nDivLen = oBndRct.right - oBndRct.left + 1; MoveTo(); } function MoveTo() { if (nLine >= oRcts.length) { nLine = 0; } obj.style.top = oRcts[nLine].top; nPosInLine = oRcts[nLine].left; nEraser = 0; timoID_2 = setInterval("MoveToInLine()",60); } function MoveToInLine() { if (nPosInLine >= oRcts[nLine].right - nDivLen) { clearInterval(timoID_2); timoID_2 = -1; obj.style.left = oRcts[nLine].right - nDivLen; nLine++; timid = setTimeout("MoveTo()", 100); return; } if (nEraser == 0) { nEraser = 1; } else { nEraser = 0; } im.src = "/workshop/graphics/dot.gif"; obj.style.left = nPosInLine; nPosInLine += 3; } function End() { if(timid != -1) { clearInterval(timid); timid = -1; } if(timoID_2 != -1) { clearInterval(timoID_2); timoID_2 = -1; } } </SCRIPT> </HEAD> <BODY ID="bodyid" onload="LoadDone()" onresize="End();LoadDone();" onunload="End()"> <P STYLE="text-align:center"> <B>The quick brown fox jumps over the lazy dog.</B> </P> <DIV ID="obj" STYLE="position:absolute"> <IMG ID="im" SRC="/workshop/graphics/dot.gif" BORDER=0 HEIGHT=16 WIDTH=16> </DIV> </BODY>
标准信息
此对象定义在 html 3.2 中。