TextRange 对象 TFOOT 元素 | tFoot 对象 DHTML 对象

TextRectangle 对象

指定包含元素或 TextRange 对象中一行文本的矩形。

成员表

属性描述
bottom 设置或获取围绕对象内容的矩形上边坐标。
left 设置或获取围绕对象内容的矩形左边坐标。
right 设置或获取围绕对象内容的矩形右边坐标。
top 设置或获取围绕对象内容的矩形下边坐标。

注释

对一个元素或文本范围对象应用 getClientRects 方法可以获得一个 TextRectangle 对象的集合。getClientRects 方法返回一个矩形的集合，其中包括每个矩形相对于客户区的上、下、左、右的坐标。

在下面取自徐志摩《再别康桥》的诗句中，b 元素(粗体文本)中共包含四个 TextRectangle 对象。

<P>悄悄的<B>我走了，<BR>
正如我悄悄的来；<BR>
我挥一挥衣袖，<BR>
不带走</B>一片云彩。
</P>

这四个 TextRectangle 对象是:

  1. “我走了，”
  2. “正如我悄悄的来；”
  3. “我挥一挥衣袖，”
  4. “不带走”

如果你更改包含此文本的窗口的大小，TextRectangle 对象不会更新。由于对象是布局的快照，应该在 onresize 事件触发后随之更新对象。

TextRectangle 的宽度可能与其包含的 TextRange 的宽度并不相等。因为 TextRange 与文本的宽度相等，而 TextRectangle 却与包含文本的元素宽度相等。

此对象在 Microsoft® Internet Explorer 5 的脚本中可用。

示例

下面的例子演示了如何使用 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>
此特性需要 Microsoft® Internet Explorer 5.0 或以后版本。请单击下面的图标安装最新版本。然后重新装入此页再查看示例。

下面的例子是用了 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>
此特性需要 Microsoft® Internet Explorer 5.0 或以后版本。请单击下面的图标安装最新版本。然后重新装入此页再查看示例。

标准信息

此对象定义在 HTML 3.2 非 Microsoft 链接 中。