使用JavaScript访问CSS3translatetransformoffsets

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

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


leftPos的值在运行时计算.

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

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

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

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


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

解决方法:

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

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

怎么做

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

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


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

> getPropertyCSSValue('-webkit-transform')→CSSValueList.(所有变换都在元素上设置.)

> [0]→WebKitCSSTransformValue(应用于此元素的第一个变换函数.)

> [0]→CSSPrimitiveValue(翻译函数的第一个参数.)

注意事项

>我个人的偏好是将属性存储在某个地方(比如元素上的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,但这肯定不再是案例警告了！