javascript - 如何在不移动元素的情况下计算元素的位置？

Question

我需要更改元素的水平位置。为此，我将其left属性更改为.css('left', value). 如果没有left定义值，这将使元素相对于它应该在的位置移动。

现在我需要重新计算将元素移动到其他位置的位置，为此，如果我没有更改它的left属性，我需要元素应该在的位置。

我可以删除该left值并询问其位置，但随后元素也会移动并希望避免这种情况，因为我可能会使元素在位置之间跳转。

我怎样才能得到元素所在的位置？

Answer 1

一种方法是在 DOM-ready 上读取元素的默认左值，并将其作为元素的data-*属性添加到元素中——我们称之为data-default-left或类似的名称。然后，当您需要进一步使用默认值时，您可以始终引用该值。

使用 jQuery的方法data-*很容易使用.data()。

Answer 2

left如果多次更改样式，元素不会在位置之间跳转。只要您的函数正在运行，浏览器中就没有更新。您可以安全地重置left样式，获取位置，然后设置新left值。

Answer 3

将 left 设置为 0、重新计算并将 left 设置为新位置将是您的情况下最简单的更改。根据我的经验，浏览器不会在 css 更新之间重新绘制。

其他一些选项：

1. 使用绝对定位而不是相对定位。那么你的出身是一致的。

2. 使用jQuery UI 位置插件。它允许您设置一个元素相对于另一个元素的位置。很有用。

Answer 4

.data()在开始移动之前使用它来存储这些信息怎么样？然后你每次需要时把它收集回来。

Answer 5

简单的。将初始剩余量存储在 dom 加载的变量中，然后在稍后进行其他计算时引用它：

$(function () { 

    var $element = $("#ME_ELEMENT_ID");

    var initialLeft = $element.offset().left;

    // Change your left here

    $element.css('left', '200px');

    // initialLeft still contains the old value

});