Share via


getBoundingClientRect method

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

Syntax

*object.*getBoundingClientRect()

Parameters

This method has no parameters.

Return value

Type: TextRectangle

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

Standards information

There are no standards that apply here.

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.

Examples

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

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectselection.htm

<head>
<script type="text/javascript">
  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.

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectdemo.htm

<head>
<script type="text/javascript">
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.png";
    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.png"
    border="0" height="16" width="16">
</div>
</body>

This following example visually highlights rectangles by tracing the client rectangles in orange, and the bounding rectangle (getBoundingClientRect) in blue.

In IE8 mode, the bounding rectangle is the same as the client rectangle. For more information, see Defining Document Compatibility.

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectangles.htm

See also

a

abbr

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

input type=button

input type=checkbox

input type=email

input type=file

input type=image

input type=number

input type=password

input type=radio

input type=range

input type=reset

input type=search

input type=submit

input type=tel

input type=text

input type=url

ins

isIndex

kbd

label

legend

li

link

listing

map

marquee

menu

nextID

noBR

object

ol

option

p

pre

q

Range

s

samp

select

small

span

strike

strong

sub

sup

table

tBody

td

textArea

TextRange

tFoot

th

tHead

tr

tt

u

ul

var

xmp