Question

我使用JavaScript使用translate属性的-webkit-transform函数移动元素：

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

leftPos的值是在运行时计算的。

在另一种方法中，我想将此节点从其当前位置移开。此方法不知道lastPos的值。

如何在不跟踪DOM的情况下从DOM中获取leftPos值？

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

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

我可以解析它，但它似乎不是最佳的。

Answer 1

我不会这样做，亲自 - 请注意原因。

仍然有可能。界面不是很清楚，所以我将解释它是如何为任何感兴趣的人做的。

怎么做

您可以通过浏览DOM转换来直接访问该属性，特别是CSSTransformValue（WebKit中的WebKitCSSTransformValue），通过它可以访问转换函数的参数：

leftPos = node.style.getPropertyCSSValue('-webkit-transform')[0][0].getFloatValue(CSSPrimitiveValue.CSS_PX);

让我们打破这一点，看看所涉及的接口：

getPropertyCSSValue('-webkit-transform')→CSSValueList。（所有变换都在元素上设置。）
- [0]→WebKitCSSTransformValue（应用于此元素的第一个转换函数。）
  - [0]→CSSPrimitiveValue（translate函数的第一个参数。）

注意事项

我个人的偏好是将属性存储在某处（如元素上的data-*属性），或者甚至在属性值上使用正则表达式，也可以使用WebKit动画来完成繁重的工作为了你。以这种方式访问它是繁琐，混乱的，并且涉及沿着DOM的一些不太好的路径徒步旅行。
即使您使用-moz-transform，此方法也无法在Firefox 中使用。 Mozilla only supports getPropertyCSSValue on the results of getComputedStyle;这为您提供了变换矩阵，在这种情况下，您可以使用window.getComputedStyle(el).getPropertyCSSValue('-webkit-transform')[0][4].getFloatValue(CSSPrimitiveValue.CSS_PX)来访问translate-X值。（假设这是唯一应用的变换。）
W3C多年来一直在讨论deprecating these interfaces，而CSSOM支持stalled at time of writing。这方面的进展是{{3}}，但肯定不再是这种情况 - 警告经纪人！

Answer 2

也许jQuery可以帮助你：jQuery: offset()。

编辑：jQuery: position()就是你想要的