读书人

到哪里可以找找到getBoundingClientRe

发布时间: 2012-04-26 14:01:31 作者: rapoo

到哪里可以找找到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

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 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> 

读书人网 >JavaScript

热点推荐