TextRectangle

HTML (DHTML)

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

TextRectangle 对象

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

成员表

下面的表格列出了 TextRectangle 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。

属性

属性描述

bottom 设置或获取围绕对象内容的矩形上边坐标。

left 设置或获取围绕对象内容的矩形左边坐标。

right 设置或获取围绕对象内容的矩形右边坐标。

top 设置或获取围绕对象内容的矩形下边坐标。

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

注释

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

在下面取自徐志摩《再别康桥》的诗句中，b 元素(粗体文本)中共包含四个 TextRectangle 对象。
悄悄的我走了， 
正如我悄悄的来； 
我挥一挥衣袖， 
不带走一片云彩。

这四个 TextRectangle 对象是:

“我走了，”

“正如我悄悄的来；”

“我挥一挥衣袖，”

“不带走”

如果你更改包含此文本的窗口的大小，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 中。

previous page start next page