如何获得元素的正确位置？

Question

我希望得到一个元素的正确位置.我已经尝试了attr('right'),我已经阅读了关于.position().right哪个不存在的API文档(我相信).

这是一个例子,我希望提醒正确的价值.

Answer 1

你想找到CSS right属性的值吗？

$('#foo').css('right');

在普通的Javascript中:

document.getElementById('foo').style.right;

但是,如果你想找到从一个元素的右边缘到另一个边缘的右边缘的计算距离,那么你必须自己做,结合.position().left和.offsetWidth

我发现JavaScript(和jQuery)不代表你计算正确位置的工作令人沮丧.这似乎是一件非常明显的事情,如果框架允许你抽象而不是为自己计算它,这将是很好的. (3认同)
@nickf右,除父级可能不是最接近的偏移父级.对我们来说幸运的是,jQuery可以为我们提供最接近的祖先元素,它们位于`.offsetParent()`.有了这个,我们可以很容易地用`$('body')获得'el`的"正确位置".width() - (el.offsetParent.offset().left + el.offsetParent().width()) `. (2认同)
如果您想检索与视口相关的位置，您可以尝试`window.innerWidth - document.getElementById('foo').getBoundingClientRect().right` (2认同)

Answer 2

在我看来这是有效的:

jQuery('#elem').offset().left + jQuery('#elem').width()

Answer 3

$(document).width() - ($('#elem').offset().left + $('#elem').width());

应该为您提供元素右侧的空间，然后您可以将其设置为元素位置的 'right' 属性的值；

Answer 4

CSS 值仅在通过样式或 $.css() 设置时才有效。

但是如果你需要得到一个对象的正确位置，你应该使用 javascript/jquery 来做。

尽管有一些有效的解决方案，但重要的是要注意 $.fn.width() 不考虑填充和边框。所以最好使用outerWidth()。

例子：

$(document).width() - ($('#elem').offset().left + $('#elem').outerWidth());

你甚至可以创建一个 $.fn 函数来获取值：

$.fn.right = function() {
  return $(document).width() - (this.offset().left + this.outerWidth());
}

然后使用它：

$('#elem').right();