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

Javascript
一定时间滚动的链接菜单效果
超链接的陷下效果
用js实现的打字效果的带链接的新闻标题
js实现的很酷的连接提示效果
再谈IE中Flash控件的自动激活 ObjectWrap
超级兔子让浮动层消失的前因后果
在线编辑器的实现原理(兼容IE和FireFox)
B/S开发中常用javaScript技术与代码
用JavaScript事件串连执行多个处理过程的方法
Javascript中的Split使用方法与技巧
HTML在线编辑器的基本概念与相关资料
Js+DVML很酷漂亮实用的右键弹出菜单
用js实现的比较经典实用的触发型导航菜单
js中slice()方法的使用说明
基础的prototype.js常用函数及其用法
常用限制input的方法的js代码
又一个图片自动缩小的JS代码
JavaScript触发器详解
理解Javascript的caller,callee,call,apply区别
一个简单的日历代码 (For: FF1+ IE5+ Opr7+)测试

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 366 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]