到哪里可以找找到getBoundingClientRect()的详细说明

bacy001 2011-09-23 11:03:08

这个函数是HTML DOM相关的，我在网上找了好久都找不到最官方的资料！哪位帅哥能帮忙提供下...

...全文

141 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

bacy001 2011-09-23

打赏
举报

http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx
这里有...

我很奇怪，为啥w3c不提供类似的支持呢？

knightzhuwei 2011-09-23

打赏
举报

来源于手头的一个手册
该手册说明如下

说明

本手册由 lemon 整理编辑 OICQ:27550369 E_mail:lemon_zj@163.com lemon_zj4618@163.com
本手册的内容全部来自Microsoft MSDN Library，若有疑问可直接访问Microsoft MSDN Library。
由于链接众多，错误之处在所难免，希望各位用户指正。由此带来的一切后果，本人概不负责。

bacy001 2011-09-23

打赏
举报

请提供一下这个资料的出处？这是我最想知道的...谢谢！

knightzhuwei 2011-09-23

打赏
举报

Retrieves an object that specifies the bounds of a collection of TextRectangle objects.

Syntax

oRect = object.getBoundingClientRect()
Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft® Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

Examples

This example uses the getClientRects and getBoundingClientRect methods to highlight text lines in an object.

HideExample

<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

}

// set the rendering properties for the yellow 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';

// set the rendering properties for the beige 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)">

A large block of text should go here. Click this

block of text multiple times to see each line

highlight with every click of the mouse button.

Once each line has been highlighted, the process

begins again starting with the first line.

</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>

Show Me
This example uses the TextRectangle collection with the getClientRects and getBoundingClientRect methods to determine the position of the text rectangle within an element. In each line, the left-justified text does not extend to the right margin of the box that contains the text. Using the collection, you can determine the coordinates of the rectangle that surrounds only the content in each line. The example code reads these rectangle coordinates and instructs the ball to move over the text only, and not to the end of the line.

HideExample

<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();

// Get bounding rect of the range

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 = "../common/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="../common/dot.gif"

BORDER=0 HEIGHT=16 WIDTH=16>

</DIV>

</BODY>