如何查找元素的x中心坐标和相关窗口偏移

Question

我希望能够从元素自身的x中心坐标开始获取元素偏移量。

我该如何实现呢？

实际上，我可以找到一个元素的窗口偏移量，但它检索的坐标是来自元素边框的，就像这样：

var _position = $(this).offset();

- itsme

---

我不确定你想要什么，是元素中间位置而不是左上角吗？另外，$position 不是正确的语法，如果是这样，只需将宽度的一半添加到 X 坐标，将高度的一半添加到 Y 坐标即可。 - Shai Mishali

@ShaiMishali 这就是正确的语法。它完美地工作了。但在JavaScript中，像那样命名变量不是惯例。 - Some Guy

Answer 1

您需要使用 offset() 方法获取元素的上下左右位置，然后将 height() 和 width() 的一半加到它们上面。这样可以得到中心坐标。

var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

如果你需要在计算时考虑padding属性，请使用以下代码：

var width = $this.outerWidth();
var height = $this.outerHeight();

- Rob W

---

你知道width()函数是否考虑了CSS中的padding规则吗？ - itsme

不包括padding属性。如果您想包括padding，请使用.outerWidth()。 - Rob W

Answer 2

现在也可以通过本地Javascript来完成这个操作：

let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;

targetNode是您想要获取其中心坐标的元素。

- Strategist

---

这仅针对于目标节点的OffsetParent计算中心位置。任何具有非静态定位（默认值）的父元素（一直到树的顶部）都会影响此计算。 - Fusty

该方法在SVG对象中返回未定义。 - Fathy