到哪里可以找找到getBoundingClientRect()的详细说明
这个函数是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
<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 DIVcdRight = 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 DIVbndRight = 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 thisblock of text multiple times to see each linehighlight with every click of the mouse button.Once each line has been highlighted, the processbegins 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>