http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx
getBoundingClientRect method
[注意:IE的版本8以下,计算的位置是从(2,2开始的)]
Retrieves an object that specifies the bounds of a collection of TextRectangle objects.
Syntax
object.getBoundingClientRect()Parameters
This method has no parameters.
Return value
Type: TextRectangle
returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.Standards information
There are no standards that apply here.
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.
Examples
This example uses the getClientRects and getBoundingClientRect methods to highlight text lines in an object.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectselection.htm
<head> <script type="text/javascript"> 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>
This example uses the TextRectangle collection with the getClientRects and getBoundingClientRect methods to determine the position of the text rectangle within an element. In each line, the left-justified text does not extend to the right margin of the box that contains the text. Using the collection, you can determine the coordinates of the rectangle that surrounds only the content in each line. The example code reads these rectangle coordinates and instructs the ball to move over the text only, and not to the end of the line.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectdemo.htm
<head> <script type="text/javascript"> var timid = -1; var timoID_2 = -1; var nLine; var nPosInLine; var oRcts; var nDivLen; var nEraser; function LoadDone() { oTextRange = document.body.createTextRange(); // Get bounding rect of the range oRcts = oTextRange.getClientRects(); nLine = 0; oBndRct = obj.getBoundingClientRect(); nDivLen = oBndRct.right - oBndRct.left + 1; MoveTo(); } function MoveTo() { if (nLine >= oRcts.length) { nLine = 0; } obj.style.top = oRcts[nLine].top; nPosInLine = oRcts[nLine].left; nEraser = 0; timoID_2 = setInterval("MoveToInLine()",60); } function MoveToInLine() { if (nPosInLine >= oRcts[nLine].right - nDivLen) { clearInterval(timoID_2); timoID_2 = -1; obj.style.left = oRcts[nLine].right - nDivLen; nLine++; timid = setTimeout("MoveTo()", 100); return; } if (nEraser == 0) { nEraser = 1; } else { nEraser = 0; } im.src = "/workshop/graphics/dot.png"; obj.style.left = nPosInLine; nPosInLine += 3; } function End() { if(timid != -1) { clearInterval(timid); timid = -1; } if(timoID_2 != -1) { clearInterval(timoID_2); timoID_2 = -1; } } </script> </head> <body id="bodyid" onload="LoadDone()" onresize="End();LoadDone();" onunload="End()"> <p style="text-align:center"> <b>The quick brown fox jumps over the lazy dog.</b> </p> <div id="obj" style="position:absolute"> <img id="im" src="/workshop/graphics/dot.png" border="0" height="16" width="16"> </div> </body>
以下部分转载(http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html)
getBoundClientRect函数详解
一、定义
getBoundingClientRect 函数是W3C组织在第一版本的W3C CSSOM View specification草案中确定的一个标准方法,在此之前,只有IE浏览器是支持该方法的,W3C在这次草案中把它扶正成为标准,足可以看出它并不简单。getBoundingClientRect 方法返回的是调用该方法的元素的TextRectangle对象,该对象具有top、left、right、bottom四个属性,分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值。
二、兼容性
getBoundingClientRect方法最先在IE5中出现,后来被W3C接纳成为标准。目前IE5.5+、Firefox 3.5+、Chrome 4+、Safari 4.0+、Opara 10.10+等浏览器均支持该方法,兼容性几乎完美。
在具体表现方面,Firefox6以前的版本使用getBoundingClientRect时不能获取到top和bottom这两个属性值,Firefox6及以后的版本和其他支持getBoundingClientRect方法的浏览器则top、left、right、bottom四个属性值均能获取到。需要说明的是由于某些版本的IE浏览器的<html>文档根元素默认是有2px边框的,所以这里需要特别处理一下,微软MSDN上说在IE5中会存在这样的情况,但据我实际测试,xp系统中IE6也存在这样的问题,奇怪的是,我在win7环境下用IETester测试的IE各版本都是正常的。但这并不是什么大问题,我们只要把得到的值减去html根元素(body也可考虑进来)的clientLeft或clientTop就能保持各浏览器一致啦。
三、用途
当getBoundingClientRect刚被w3c列为标准的时候,PPK还曾质疑过它是不是多此一举,因为已经存在类似的方法来获取元素的偏移位置,比如offsetLeft和offsetTop。但Jquery的作者John Resig马上阐明了getBoundingClientRect的用处。用传统的方法固然可以实现getBoundingClientRect同样的功能,但兼容各种浏览器以及各种不同的元素就会把你弄死,而且效率还非常低下。所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了。而获取元素的偏移量能有什么用,我相信,你懂的~ ^_^
相关推荐
所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document....
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-3 第5章 HTML5 画布 getBoundingClientRect()
document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties ...
ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确...
使用JavaScript的PointerEvent,Node.cloneNode()和getBoundingClientRect()进行拖放的界面的小型演示,您可以在其中选择操作框并将其放置在放置区中。 您可以在放置区中移动它们,以正确的顺序设置数字时,会...
JavaScript片段 点击 :star: 如果您喜欢这个项目。 提取请求受到高度赞赏。 在关注我们 目录 不。 问题 1个 2个 3 4 5 6 7 8 9 10 11 12 13 14 Object.is()方法确定两个值是否相同 15 冻结对象 16 打印对象...
用于 getBoundingClientRect 的 jQuery 插件助手 安装 $ bower install jquery.bounds --save 用法 $ ( 'div.mynode' ) . bounds ( ) ; 这将返回一个具有以下属性的对象: { top : 100 , left : 100 , ...
主要介绍了js中getBoundingClientRect的作用及兼容方案详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用纯JavaScript编写的SVG到base64转换器 它易于使用-只需抓取要转换的SVG即可...做到这一点。 快速开始 我们需要获取目标SVG: var svg = document . querySelector ( 'svg' ) ; 比我们必须创建宽度和高度完全像...
JavaScript 一个合格的中级前端工程师需要掌握的 JavaScript 技巧 数组Api的内部原理 reduce实现数组的Api ES6 class的ES5实现 函数柯里化/偏函数 ... new promise相关的api的实现(all,race,finall
如何知道某个元素在视口中是否可见。 点击下面的链接查看博客文章
本文实例讲述了JavaScript获取指定元素位置的方法。分享给大家供大家参考。具体如下: 代码如下:function showpane() { var self = document.getElementById(“eID”); var left = self.getBoundingClientRect...
最终效果 这里的关键主要是判断鼠标是从哪个方向... var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect().top - h/2; var direction = Math.round((((Math.
javascript中 ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height。几乎所有浏览器都支持该...
分享两个监测元素是否在视口内的方法 使用 Element.getBoundingClientRect() 方法返回元素相对于视口的位置 const isElementVisible = (el) => { const rect = el.getBoundingClientRect(); }; 获取浏览器...
2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法: _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree 注:_parseXMLTree方法是与loadXML,...
React分配器1.2.0版新版本变更固定1.1.0版新版本变更已修复React 16中的getBoundingClientRect问题安装: npm install --save m-react-splitters React的Splitters已经用TypeScript编写。 该分配器支持触摸屏。 拆分...
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...