我怎样才能得到一个对象的JavaScript页面上的绝对位置?
我想要获得一个对象的绝对的X,Y在JavaScript页面上的位置。 我该怎么做?
我试过obj.offsetTop
和obj.offsetLeft
,但这些只给出了相对于父元素的位置。 我想我可以循环,并添加父母的偏移量,及其父母的偏移,等等,直到我没有父母的对象,但似乎应该有一个更好的办法。 谷歌search没有太多,甚至SO网站search没有find任何东西。
另外,我不能使用jQuery。
var cumulativeOffset = function(element) { var top = 0, left = 0; do { top += element.offsetTop || 0; left += element.offsetLeft || 0; element = element.offsetParent; } while(element); return { top: top, left: left }; };
(方法从PrototypeJS无耻地窃取;代码风格,variables名称和返回值改变,以保护无辜)
我肯定会build议使用element.getBoundingClientRect() 。
https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
概要
返回包含一组文本矩形的文本矩形对象。
句法
var rectObject = object.getBoundingClientRect();
返回
返回的值是一个TextRectangle对象,它是由getClientRects()为元素返回的矩形的联合,即与该元素关联的CSS边框。
返回的值是一个
TextRectangle
对象,其中包含只读left
,top
,right
和bottom
属性,以像素为单位,左上angular相对于视口的左上angular。
以下是从链接的MDN站点获取的浏览器兼容性表格:
+---------------+--------+-----------------+-------------------+-------+--------+ | Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | +---------------+--------+-----------------+-------------------+-------+--------+ | Basic support | 1.0 | 3.0 (1.9) | 4.0 | (Yes) | 4.0 | +---------------+--------+-----------------+-------------------+-------+--------+
它得到了广泛的支持,使用起来非常简单,更不用说速度非常快。 以下是John Resig的相关文章: http : //ejohn.org/blog/getboundingclientrect-is-awesome/
你可以像这样使用它:
var logo = document.getElementById('hlogo'); var logoTextRectangle = logo.getBoundingClientRect(); console.log("logo's left pos.:", logoTextRectangle.left); console.log("logo's right pos.:", logoTextRectangle.right);
这里有一个非常简单的例子 : http : //jsbin.com/awisom/2 (你可以通过点击右上angular的“在JS Bin中编辑”来查看和编辑代码)。
或者这是另一个使用Chrome的控制台:
注意:
我必须提到的是,在Internet Explorer 8中, getBoundingClientRect()
方法的返回值的width
和height
属性是undefined
。它在Chrome 26.x,Firefox 20.x和Opera 12.x中都可以使用。 在IE8中的解决方法:对于width
,可以减去返回值的右侧属性和左侧属性,对于height
,可以减去底部和顶部属性( 如此 )。