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 链接 中。