这个函数是HTML DOM相关的,我在网上找了好久都找不到最官方的资料!哪位帅哥能帮忙提供下...
------解决方案--------------------
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
- HTML code
<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>