当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]

Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
在线演示常用javascript特效
Meta 标签生成器
动态生成的IFRAME,设置SRC时的问题解决分析
CSS常用网站布局实例
JS动画效果代码2
JS动画效果代码3
js COL能很好的控制表格的列
readonly和disabled的区别
在CSS里写复杂的JavaScript脚本
用JavaScript操作WinRar
javascript add event remove event
HTML中Select不用Disabled实现ReadOnly的效果
用JavaScript调用WebService的示例
大家未必知道的Js技巧收藏
js批量上传界面的实现
javascript倒计时效果代码,可以方便参数调用
能在网页中写字和能擦写的js程序
javascript背投广告代码的完善
js函数般调用正则

Javascript 中的 javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 382 ::
收藏到网摘: n/a

该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。 document.documentElement.getBoundingClientRect
下面这是MSDN的解释:
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.
还是实际解释下,该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。也不好理解,下面用图说明下。
该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

下面的代码举了个简单的例子,可以滚动滚动条之后点红色区域看各个值的变化。

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]