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

How to calculate where an element should be without moving it?

本文关键字：元素 情况下 计算 位置 移动      更新时间：2023-09-26

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

现在我需要重新计算位置，将元素移动到其他地方，要做到这一点，我需要元素的位置，如果我没有改变它的left属性。

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

我怎样才能得到元素的位置呢?

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

一种方法是读取DOM-ready上元素的默认左值，并将其作为元素的data-*属性添加到元素中-让我们称之为data-default-left或类似的东西。当你需要使用默认值时，你可以随时引用这个值。

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

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

其他选项:

  1. 使用绝对定位代替相对定位。

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

在开始移动之前如何使用.data()来存储此信息?然后每次你需要的时候你就把它收集回来。

很简单。将初始剩余量存储在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
});
相关文章：