getBoundingClientRect() 来获取页面元素的位置

转载 2011年01月09日 01:16:00

下面这是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中必须通过循环来获得元素在页面中的绝对位置。

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

有了这个方法,获取页面元素的位置就简单多了,

            var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

相关文章推荐

Javascript获取页面元素的绝对位置

一、概念 绝对位置:网页元素的左上角相对于整张网页左上角的坐标 相对位置:相对于浏览器窗口左上角的坐标 二、获取方法 1、每个元素都有offsetTop和offsetLeft属性,表示该元素的...

用JavaScript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先,要明确两个基本概念。 一...

js获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口中看到的那部...

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先,要明确两个基本概念...

含有滚动条元素的getBoundingClientRect等属性的值

问题1:首先我们给出iScroll的一个官方的demo,你可以把这个demo拷贝到本地然后运行,或者去github下载 iScroll demo: scrollbars var myS...

Javascript获取页面元素相对和绝对位置

需求来自于一个同学的小小要求,某人问我能否实现自动点赞?!然后我首先想到的是console上运行js代码获取某个元素并模拟鼠标点击,大体一搜发现没有资料大体也有人说必须这个元素绑定的有onclick方...

获取Html元素在页面中的绝对位置及问题

在Web开发中如果要想随心所欲的自由控制HTML元素,我们很多时候需要获得HTML元素在页面中的绝对位置(就是相对于浏览器的左上角坐标(0,0))。    这个位置的获取其实并不难,由于每个Ht...

javaScript获取元素位置以及元素页面大小总结

js获取元素位置以及元素页面大小总结: 一:元素位置: js中获取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop获取的...

JS与JQUERY获取页面大小、滚动条位置、元素位置

js与jquery获得页面大小、滚动条位置、元素位置 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.in...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:getBoundingClientRect() 来获取页面元素的位置
举报原因:
原因补充:

(最多只允许输入30个字)