getClientRects method

Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.

Syntax

object.getClientRects()

Parameters

This method has no parameters.

Return value

Type: TextRectangle

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

Standards information

There are no standards that apply here.

Examples

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

Code example: http://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: http://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 Internet Explorer 8 standards mode, the bounding rectangle is the same as the client rectangle.

Code example: http://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
HTMLInputElement
i
img
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
TextRectangle

 

 

Show:
© 2014 Microsoft