移动div时计算x值

Question

如何在水平移动时计算div的x值。 我可以看到这个div的属性变化像这样 - transform：translate3d（-112px，0px，0px）;

我希望通过javascript获得x的值为-112px。

Answer 1

我们假设你有类似的东西：

<div id="test" style="transform: translate3d(-112px, 0px, 0px);"></div>

获取x值的javascript代码是：

var div = document.getElementById('test');
// get the style value
var tranform = div.style.transform;
// transform will contain this: "translate3d(-112px, 0px, 0px)"
// Now use regexp to get the x value eg: tranform.match(/.{0,1}\d+px/) returns this Array [ "-112px" ]
// So the following code will return the value "-112px".
var x = tranform.match(/[-]*\d+px/)[0];

更新：解释正则表达式

  

/ [ - ] {0,1} \ d + PX /

[-]{0,1}将匹配 - 签名是否有任何
\d+将匹配任意数字 px将匹配＆＃34; px＆＃34;串

Answer 2

获取元素绝对屏幕位置的最简单方法是使用getBoundingClientRect。

var element = document.getElementById('id-of-the-moving-element');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;

您可以找到getBoundingClientRect here的更多详细信息。