首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-04-26 
到哪里可以找找到getBoundingClientRect()的详细说明这个函数是HTML DOM相关的,我在网上找了好久都找不到

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

热点排行