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: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectselection.htm

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>
                                    
Show:
© 2015 Microsoft