getBoundingClientRect Method

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.

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

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.

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

Standards Information

There is no public standard that applies to this method.

Applies To

TABLE Platform Version

Win16:	5
Win32:	5
Unix:	5
Mac:	5
Windows CE:	5.5

A , ACRONYM , ADDRESS , APPLET , AREA , B , BASE , BASEFONT , BIG , BLOCKQUOTE , BODY , BUTTON , CAPTION , CENTER , CITE , CODE , COL , COLGROUP , COMMENT , CUSTOM , DD , DEL , DFN , DIR , DIV , DL , DT , EM , EMBED , FIELDSET , FONT , FORM , hn , I , IMG , INPUT type=button , INPUT type=checkbox , INPUT type=file , INPUT type=image , INPUT type=password , INPUT type=radio , INPUT type=reset , INPUT type=submit , INPUT type=text , INS , ISINDEX , KBD , LABEL , LEGEND , LI , LINK , LISTING , MAP , MARQUEE , MENU , nextID , NOBR , OBJECT , OL , OPTION , P , PRE , Q , S , SAMP , SELECT , SMALL , SPAN , STRIKE , STRONG , SUB , SUP , TABLE , TBODY , TD , TEXTAREA , TextRange , TFOOT , TH , THEAD , TR , TT , U , UL , VAR , XMP

Home | Top | Free Ajax Editor | JavaScript Editor

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→