当前位置: 代码迷 >> JavaScript >> 到哪里可以找找到getBoundingClientRect()的详细说明解决方法
  详细解决方案

到哪里可以找找到getBoundingClientRect()的详细说明解决方法

热度:72   发布时间:2012-04-26 14:01:31.0
到哪里可以找找到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 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> 
  相关解决方案