使用JavaScript访问CSS3 translate transform offsets

Question

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

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

leftPos在运行时计算值.

在另一种方法中,我想将此节点从其当前位置移动.这种方法不知道的价值lastPos.

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

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

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

我可以解析这个,但它似乎不是最佳的.

Answer 1

我不会这样做,亲自 - 请注意为什么.

不过,这是有可能的.界面不是很清楚,所以我将解释它是如何为任何感兴趣的人所做的.

怎么做

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

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

让我们分解一下,看看所涉及的接口:

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

注意事项

• 我个人的偏好是只是将属性存储在某个地方(比如data-*元素上的属性),或者甚至在属性值上使用正则表达式,并且可能使用WebKit动画为您做繁重的工作.以这种方式访问​​它是繁琐,凌乱的,并且涉及沿着DOM的一些不太好的踏板路径徒步旅行.

• 即使您使用此方法也无法在Firefox中使用-moz-transform.Mozilla只支持getPropertyCSSValue结果getComputedStyle ; 这为您提供了变换矩阵,在这种情况下,您将使用它window.getComputedStyle(el).getPropertyCSSValue('-webkit-transform')[0][4].getFloatValue(CSSPrimitiveValue.CSS_PX)来访问translate-X值.(假设这是唯一应用的变换.)

• W3C多年来一直在谈论弃用这些接口以支持CSSOM.在撰写本文时,这方面的进展停滞不前,但这肯定不再是案例 - 警告了!