javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页
更新时间：2009年05月22日 00:00:59 作者：
该方法已经不再是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 全选 注:引入外部Js需再刷新一下页面才能执行]
有了这个方法，获取页面元素的位置就简单多了，
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
下面这是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 全选 注:引入外部Js需再刷新一下页面才能执行]
有了这个方法，获取页面元素的位置就简单多了，
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
相关文章
这篇文章主要介绍了javascript制作的网页侧边弹出框思路及实现代码,需要的朋友可以参考下2014-05-05
这篇文章给大家介绍了bootstrap table支持高度百分比的实例代码，通过更改BootstrapTable.prototype.resetView 方法，以支持高度百分比定义，适应不同高度屏幕，感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
这篇文章主要为大家详细介绍了javaScript日期工具类的汇总，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要给大家总结介绍了关于JS中循环遍历数组的四种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
本文内容主要介绍，通过使用React+three.js技术栈，加载3D模型、添加3D文字、增加动画、点击交互等，配合样式设计，实现充满设计感的酸性风格页面2021-10-10
JavaScript使用Promise封装Axios进行高效开发
这篇文章主要介绍了JavaScript使用Promise封装Axios进行高效开发，Axios是一个基于Promise的HTTP库，它可以帮助我们更方便地发起HTTP请求，并且提供了许多高级功能，感兴趣的同学可以参考下文2023-05-05
JavaScript学习笔记(三)：JavaScript也有入口Main函数
大家都知道在c和java中，有main函数货main方法作为一个程序的入口函数或方法。在JS中从js源文件的头部开始运行的，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟其他语言统一了，而且说不定你会对JS有更深的理解。感兴趣的小伙跟着小编一起学习吧2015-09-09
将HTML格式的String转化为HTMLElement的实现方法
本节主要介绍了将HTML格式的String转化为HTMLElement的实现方法,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JavaScript数组reduce()方法，reduce()方法是处理数组的方法，它接收一个函数和一个初始值，然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理，最后返回和初始值相同类型的值,需要的朋友可以参考一下2022-01-01
javascript中createElement的两种创建方式
这篇文章主要介绍了javascript中createElement的两种创建方式,具有一定参考借鉴价值,需要的朋友可以参考下2015-05-05
最新评论