Question

（这似乎是一个简单的问题，以前会被问过，但是如果有的话我找不到它，虽然有很多类似的但没有回答我想要的东西。）

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

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

在Chrome（34.0.1847.137 m）中，它仅为左/上方提供像素，但为右/下方返回auto。

有各种各样的问题解释说这是.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's getRelativeClientRect answer符合此条件。

Answer 1

您可以使用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
  };
}

Answer 2

编辑：这大约是absolute position

很老的功能findPos

http://www.quirksmode.org/js/findpos.html

Variante考虑滚动＆amp;边界

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

Note1 ：这些是与旧浏览器兼容的vanilla javascript函数。这就是为什么不需要jQuery。性能比使用jQuery要好得多。

Note2 ：如果您搜索查找位置，还有很多其他版本

<强> 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（＆＃39; right＆＃39;）值 Firefox返回

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

所以：getPosition函数或getBoundingClientRect

然后你需要计算上/下，左/右值。

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

<强> EDIT2：

要仅将此应用于父元素，您还需要在父元素
上执行getPosition
并且计算显示在@kalley的答案中。

Answer 3

有一种内置的方法可以在没有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的最佳方法是，您不仅可以获得左/右/上/下的实际值，还可以设置它们。这对于像拖放这样的东西来说非常棒。

Answer 4

您可以使用$（）。offset来获取它 - 它返回文档中的位置。假设p是父元素，你的元素位于哪个元素。

然后左边是

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

右边比较复杂，你也必须使用宽度

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

最后一件事就是获得好处。你直接知道它或在$（el）.parents（）中找到它它有相对或绝对的位置。

Answer 5

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

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;

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

5 个答案: