如何获得绝对定位元素的左/右/上/下的实际值？
（这看起来像是一个简单的问题，之前会被问过，但是如果有的话我找不到它，虽然有很多类似的但没有回答我的想法。）
在Firefox（24.0）中，这段代码给了我想要的东西 – 相关的像素数：
jQuery('selector').css('right') 在Chrome（34.0.1847.137 m）中，它仅为左/上方提供像素，但在右/下方返回auto 。
SO上有各种各样的问题，说明这是.css的预期行为，但我找不到任何解释如何获得我想要的行为的东西 – 即给我计算所有四个值的像素值。
JS或jQuery有没有办法直接获取这四个值，这些值在所有浏览器/场景中都能正常运行？ （或者我是否必须采用难看的手动计算？）
澄清：
我需要的值等同于Firefox返回的.css('right')值 – 这是当前元素和父元素的右边缘之间的距离。 这与某些函数返回的视口相对左+宽度定义不同。
即这里记录的值应该在数值上相同：
elem = jQuery('selector') rect = someFunction( elem[0] ); console.log([ elem.css('left') , rect.left ]); console.log([ elem.css('right') , rect.right ]); console.log([ elem.css('top') , rect.top ]); console.log([ elem.css('bottom') , rect.bottom ]);
除非我误读其他答案，否则只有kalley的getRelativeClientRect答案符合此条件。
你可以使用getBoundingClientRect 。 如果您使用它们，它也会考虑任何变换。
你需要像jQuery('selector')[0].getBoundingClientRect()一样调用它。 或者使用像document.querySelector('selector').getBoundingClientRect()这样的vanilla javascript，它将返回单个元素或document.querySelectorAll('selector')[index].getBoundingClientRect() 。
总结一下，以稍微可读的格式：
-
jQuery('selector')[0].getBoundingClientRect() -
document.querySelector('selector').getBoundingClientRect() -
document.querySelectorAll('selector')[index].getBoundingClientRect()
或者用较旧的QS呼叫替换，如getElementById等。
这是一个你可以使用的函数，如果你想得到它相对于它的父：
function getRelativeClientRect(el) { var rect = el.getBoundingClientRect(), parentRect = el.offsetParent.getBoundingClientRect(); return { bottom: parentRect.bottom - rect.bottom, height: rect.height, left: rect.left - parentRect.left, right: parentRect.right - rect.right, top: rect.top - parentRect.top, width: rect.width }; }
有一种内置的方法可以在没有JQUERY的Javascript中执行此操作。 我将向您展示两个特殊的，一个是JS和CSS，另一个是JS。
element.style.left; //Gives you distance from left edge of your viewport. element.style.top + "px"; //Gives you distance in pixels from top edge element.style.right; //etc. //There is also the way of Offset. You do not need CSS at all for this. //Of course, Jquery has its own way of doing this, but I'll show JS-only element.offsetTop; //Gives distance from top of viewport to top of element element.offsetLeft; //Gives distance from left of viewport to left of element //etc.
与往常一样，有很多方法可以使用和不使用Jquery。 我根本不喜欢使用Jquery（尽管它很棒），我知道其他人也不喜欢使用Jquery。 如果你想使用Jquery，我建议使用像@farincz那样的Jquery方式。 如果没有，这种方式或getBoundingClientRect更好。 使用.style.top或.style.left最佳.style.left是，您不仅可以获得左/右/上/下的实际值，还可以设置它们。 这对于像拖放这样的东西来说非常棒。
编辑：这是关于absolute position
很老的functionfindPos
http://www.quirksmode.org/js/findpos.html
瓦里安特考虑滚动和边界
function getPosition(el){ var x=0,y= 0; while(el) { x+=(el.offsetLeft-el.scrollLeft+el.clientLeft); y+=(el.offsetTop-el.scrollTop+el.clientTop); el=el.offsetParent; } return{x:x,y:y} }
为了正确
var info=getPosition(element); console.log('marginRight: '+info.x-element.offsetWidth);
注意1 ：这些是与旧浏览器兼容的vanilla javascript函数。 这就是为什么不需要jQuery。性能比使用jQuery要好得多。
注意2 ：如果搜索查找位置，还有许多其他版本
getBoundingClientRect
得到正确的
var info=element.getBoundingClientRect(); // Native Javascript ..think 1.6+ console.log('marginRight: 'info.right-info.width);
结论
如果你想要一个全能兼容的脚本，没有简单的方法来获取元素的尺寸，偏移量，应用的css。
getPosition函数可能是最好的函数（考虑兼容性），它允许您轻松计算此值。
注意：由于函数内部有一个while循环，在非常旧的机器上，你可能会遇到一些嵌套元素的问题。
如果你使用html5和css比去getBoundingClientRect
注意：使用css3转换时可能都会中断。
编辑
我需要的值等同于Firefox返回的.css（’right’）值
要获得这些值，首先需要找到元素的位置。
所以： getPosition函数或getBoundingClientRect
那么你需要计算顶部/底部，左/右值。
left=x right=x-width top=y bottom=y-height
EDIT2：
要仅将此应用于父元素，您还需要在父元素上执行getPosition
计算结果显示在@kalley的答案中。
您可以使用$（）。offset来获取它 – 它返回文档中的位置。 假设p是父元素，元素位于哪个元素位置。
然后离开了
var left = $(el).offset().left - $(p).offset().left;
对比较复杂，你必须也使用宽度
var right = ($(p).offset().left + $(p).width()) - ($(el).offset().left + $(el).width());
最后一件事就是获得好处。 你直接知道它或在$（el）中找到它.parents（）它有位置相对或绝对。
使用函数getBoundingClientRect（） ，它为您提供left，right，top，bottom，width，height值：
var myid=document.getElementById("id").getBoundingClientRect(); var bottom=myid.bottom; var top=myid.top; var right=myid.right
… 等等。
资料来源： MDN | Element.getBoundingClientRect（）
编辑：
要获取与页面相关的坐标而不是视口：
var bodycoord=document.body.getBoundingClientRect(); var top-from-page=myid.top-bodycoord.top; var left-from-page=myid.left-bodycoord.top;