javascript - 使用 JavaScript 访问 CSS3 translate 转换偏移量

Question

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

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

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

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

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

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

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

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

Answer 1

就我个人而言，我不会这样做——请查看警告以了解原因。

不过，还是有可能的。这些接口(interface)不是很为人所知，所以我会向感兴趣的人解释它是如何完成的。

怎么做

您可以通过钻取 CSS 转换的 DOM 接口(interface)直接访问属性，特别是 CSSTransformValue (WebKit 中的 WebKitCSSTransformValue)，您可以通过它访问转换函数的参数:

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

让我们分解一下，看看涉及的接口(interface):

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

注意事项

• 我个人的偏好是将属性存储在某处(例如元素上的 data-* 属性)或者甚至在属性值上使用正则表达式，并且可能使用 WebKit 动画为你做繁重的工作。以这种方式访问​​它是乏味的、困惑的，并且涉及到通过 DOM 沿着一些人迹罕至的路径跋涉。

• 此方法在 Firefox 中无效，即使您使用 -moz-transform。 Mozilla only supports getPropertyCSSValue on the results of getComputedStyle ;这给了你变换矩阵，在这种情况下你会使用访问 translate-X 值。 (假设这是唯一应用的转换。)

• W3C 一直在谈论 deprecating these interfaces多年来支持CSSOM .这方面的进展是 stalled at time of writing ，但肯定不再是这种情况了——买者自负!