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

Javascript
innerHTML和innerText的用法
单击按钮复制定义好的内容到剪贴板
浏览器兼容性:停止事件冒泡和阻止浏览器的默认行为
javascript初学者:全面学习对象概念
10款图片展示Javascript代码
解决ajax跨域问题的实例
rails制作rss feed
javascript变量作用域在不同浏览器的处理
网页整理的JS技巧代码
js操作iframe的src的例子
Javascript利用循环绑定事件的例子
Javascript网页恶意代码
javascript恶意代码修改主页修复
JavaScript折叠式列表的网页制作
初学Javascript的总结
JavaScript编程实践中容易出错的地方
JavaScript容易犯错的九个陷阱
复制文章自动附加版权信息
MooTools教程(1):认识MooTools
MooTools教程(2):DOM选择器

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


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