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获取页面元素相对和绝对位置

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

JavaScript 获取鼠标及元素在页面上的位置

JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?另外,还有哪些能快速获...
  • u013063153
  • u013063153
  • 2016年09月27日 09:44
  • 3596

在Html中元素的相对位置的获取

在JQuery中,经常会用到弹出层tooltip进行信息的显示,经常会在某个标签,例如或者上,当鼠标放上去时,将弹出层显示在此标签的下方或者当前鼠标指针的右下方。     这两种都首先需要将弹出框设...
  • Sara_xie
  • Sara_xie
  • 2015年12月04日 19:30
  • 1171

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

getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect   下面这是MS...
  • plpblue
  • plpblue
  • 2012年07月23日 11:52
  • 133

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确两个基本...
  • SUKHOI27SMK
  • SUKHOI27SMK
  • 2017年06月20日 16:01
  • 102

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确...
  • prettywhitewolf_xiao
  • prettywhitewolf_xiao
  • 2012年06月28日 17:38
  • 352

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确两个基本...
  • LazyDreamHunter
  • LazyDreamHunter
  • 2016年03月11日 10:54
  • 389

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

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

用Javascript获取页面元素的位置

作者: 阮一峰 日期: 2009年9月14日 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一...
  • e_wsq
  • e_wsq
  • 2012年04月22日 18:02
  • 387

js获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口中看到的那部...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年10月15日 10:11
  • 2131
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:getBoundingClientRect() 来获取页面元素的位置
举报原因:
原因补充:

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