使用JavaScript访问CSS3转换偏移量

我正在使用JavaScript使用

-webkit transform

属性的

translate

函数移动元素：

node.style.WebkitTransform = "translate(" + leftPos + "px, 0px)"

leftPos

的值是在运行时计算的

在另一种方法中，我希望将此节点从其当前位置移动。此方法不知道

lastPos

的值

如何从DOM中获取

leftPos

值而不跟踪它？

一个明显的解决方案是解析属性值：

node.style.WebkitTransform; // returns "translate(-Xpx, 0px)"

---

我可以解析这个，但它似乎不是最优的。

也许jQuery可以帮助您：

---

编辑：这是你想要的

我不会这样做，我个人看到了为什么要这样做的警告

不过，这是可能的。这些接口不是很广为人知，所以我将向感兴趣的人解释如何实现

怎么做 您可以通过钻取CSS转换的DOM接口直接访问属性，特别是（在WebKit中），通过该接口可以访问转换函数的参数：

leftPos=node.style.getPropertyCSSValue（'-webkit transform'）[0][0].getFloatValue（CSSPrimitiveValue.CSS_-PX）；

让我们将其分解，并查看涉及的接口：

• → . （在元素上设置的所有变换。）

  • [0]

    → （应用于此元素的第一个变换函数。）

    • [0]

      → （

      translate

      函数的第一个参数。）

警告

• 我个人的偏好是只将属性存储在某个地方（比如元素上的

  data-*

  属性），或者甚至在属性值上使用正则表达式，或者使用WebKit动画为您完成繁重的工作。以这种方式访问它是乏味、混乱的，并且需要沿着一些不太好的路径通过DOM

• 即使您使用

  -moz transform

  ，此方法在Firefox中也不起作用；这将为您提供转换矩阵，在这种情况下，您将使用

  window.getComputedStyle（el）.getPropertyCSSValue（'-webkit transform'）[0][4].getFloatValue（CSSPrimitiveValue.CSS_PX）

  访问translate-X值。（假设这是应用的唯一变换。）

• 多年来，W3C一直在讨论如何支持这一计划。在这方面取得的进展是，但这肯定不再是一个警告买主的情况

---

您可能需要对其进行解析。因为您谈论的是“最优”，所以保持跟踪比使用DOM@gengkev：不一定！：）您可以直接访问参数，但我个人倾向于将值存储为元素的属性。

jQuery.offset

在WebKit中考虑CSS转换，但请注意，它测量相对于整个文档的偏移位置；这可能不是迪恩想要的！：）在某些情况下，你可能是对的，但在这个情况下，你不是对的

jQuery.offset

测量到最近的偏移量

jQuery.offset

（）肯定返回相对于文档的位置，而不是偏移父项；也许你在考虑

jQuery.position

（）？在文档中：“通过

.offset（）

方法，我们可以检索元素相对于文档的当前位置。将其与

.position（）

进行对比，后者检索相对于偏移父元素的当前位置。”演示：回答得很好，感谢注意工作组的讨论：）