Javascript 如何获得绝对定位元素的左/右/上/下的实际值？

（这似乎是一个以前会被问到的简单问题，但如果有，我找不到，尽管有很多类似的问题无法回答我想要的。）

在Firefox（24.0）中，这段代码给出了我想要的——相关像素数：

jQuery('selector').css('right')

在Chrome（34.0.1847.137米）中，它只为左/上提供像素，但为右/下返回

auto

关于如何解释这是.css的预期行为，有各种各样的问题，但我找不到任何东西来解释如何获得所需的行为，即为所有四个值提供计算出的像素值

JS或jQuery是否有任何方法可以直接获得这四个值，这在所有浏览器/场景中都是一致的？（还是我必须求助于丑陋的人工计算？）

澄清：
我需要与Firefox返回的

.css（'right'）

值等效的值，即当前元素和父元素的右边缘之间的距离。这与某些函数返回的视口相对左+宽度定义不同

i、 e.此处记录的数值应相同：

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 ]);

除非我误读了其他答案，否则只符合此标准。

您可以使用。如果您正在使用转换，它也会考虑任何转换

您需要像调用jQuery（'selector'）[0]那样调用它。或者使用普通javascript，如

document.querySelector（'selector'）.getBoundingClientRect（）

，它将返回单个元素或

document.queryselectoral（'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
  };
}

您可以使用$（）获得它。偏移量-它返回文档中的位置。 假设p是元素所在位置的父元素

然后左边是

var left = $(el).offset().left - $(p).offset().left;

右侧更复杂，必须同时使用宽度

var right = ($(p).offset().left + $(p).width()) - ($(el).offset().left + $(el).width());

最后一件事是获得许可。您可以直接知道它，也可以在$（el.parents（）中找到它

---

它具有相对位置或绝对位置。

使用函数getBoundingClientRect（），它为您提供左、右、上、下、宽、高值：

var myid=document.getElementById("id").getBoundingClientRect();
var bottom=myid.bottom;
var top=myid.top;
var right=myid.right

。。。 等等

资料来源：

编辑：

要获取相对于页面而非视口的坐标，请执行以下操作：

var bodycoord=document.body.getBoundingClientRect();
    var top-from-page=myid.top-bodycoord.top;
    var left-from-page=myid.left-bodycoord.top;

---

编辑：这是关于绝对位置的

非常古老的函数findPos

考虑滚动和边框的差异

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：这些是与旧浏览器兼容的普通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转换时，两者可能都会中断

编辑

我需要与.css（'right'）值等效的值 火狐回归

要获得这些值，首先需要找到元素的位置

所以：

getPosition

函数或

getBoundingClientRect

然后，您需要计算上/下、左/右值

left=x
right=x-width
top=y
bottom=y-height

EDIT2:

要仅将其应用于父元素，还需要在父元素上执行

getPosition

---

计算结果如@kalley的答案所示。

在Javascript中有一种内置的方法可以在不使用JQUERY的情况下实现这一点。我将向你们展示两个特别的，一个是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。如果您想使用Jquery，我建议您像@farincz那样使用Jquery方式。如果不是，则使用这种方式或

getBoundingClientRect

更好。使用

.style.top

或

.style.left

的最佳方法是，您不仅可以获取左/右/上/下的实际值，还可以设置它们。这对拖放之类的东西很好。

哦，太好了！我想我对OP的评论是不准确的。值得注意的是，

getBoundingClientRect

返回的矩形相对于视口具有

左

和

顶

，因此这当然是另一回事。使用它还需要所谓的丑陋的手动计算。添加了一个函数，该函数将根据元素的

offsetParent

标准化所有内容。感谢@KingKing指出单独使用它的缺陷。left和top返回负值（我修正了顺序），但我想这可能是最好的选择now@PeterBoughton我在我的网站上使用此功能，但遇到一些奇怪的问题