如何获得translateX和translateY的价值？

Question

我希望translateY通过JavaScript从内联css中获取价值.

这是内联值:

style ="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, -13361.5px) scale(1) translateZ(0px);"

这些代码给了我变量中的总列表:

var tabletParent = document.getElementById("scroller");
var toTop = tabletParent.style.transform;
console.log(toTop);

console.log

translate(0px, -12358.8px) scale(1) translateZ(0px)

预期toTop为-12358.8px.

Answer 1

有多种方式.我想到的第一个是解析你得到的字符串.

例如:

function getTranslateZ(obj)
{
    var style = obj.style,
        transform = style.transform || style.webkitTransform || style.mozTransform,
        zT = transform.match(/translateZ\(([0-9]+(px|em|%|ex|ch|rem|vh|vw|vmin|vmax|mm|cm|in|pt|pc))\)/);
    return zT ? zT[1] : '0';
    //Return the value AS STRING (with the unit)
}
// getTranslateZ(tabletParent) => '0px'

但是,这仅适用于明确定义的translateZ(不是translate3d或matrix3d).最一致的方法可能是getComputedStyle,但这总是得到px单位的值,因此在计算它时才真正有效(窗口大小调整可以改变它):

function getComputedTranslateZ(obj)
{
    if(!window.getComputedStyle) return;
    var style = getComputedStyle(obj),
        transform = style.transform || style.webkitTransform || style.mozTransform;
    var mat = transform.match(/^matrix3d\((.+)\)$/);
    return mat ? ~~(mat[1].split(', ')[14]) : 0;
    // ~~ casts the value into a number
}
// getComputedTranslateZ(tabletParent) => 0

看到这个小提琴显示两种方法(请注意,我一直在使用chrome进行测试,所以我已经为你的CSS添加了前缀-webkit-).

编辑:
要获得translateY,如果您的访问者浏览器最近足以支持getComputedStyle,您可以更改我的getComputedTranslateZ函数以处理矩阵和matrix3d值.它比尝试解析每个可能的css字符串(translateY,translate,translate3d,matrix,matrix3d)更简单:

function getComputedTranslateY(obj)
{
    if(!window.getComputedStyle) return;
    var style = getComputedStyle(obj),
        transform = style.transform || style.webkitTransform || style.mozTransform;
    var mat = transform.match(/^matrix3d\((.+)\)$/);
    if(mat) return parseFloat(mat[1].split(', ')[13]);
    mat = transform.match(/^matrix\((.+)\)$/);
    return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
}

Answer 2

function getTranslateXValue(translateString){

  var n = translateString.indexOf("(");
  var n1 = translateString.indexOf(",");

  var res = parseInt(translateString.slice(n+1,n1-2));

return res;

}
function getTranslateYValue(translateString){

 var n = translateString.indexOf(",");
  var n1 = translateString.indexOf(")");

  var res = parseInt(translateString.slice(n+1,n1-1));
return res;

}

Answer 3

如果你想要没有'px'的原始值,你可以使用这样的正则表达式:

var transZRegex = /\.*translateZ\((.*)px\)/i;

并得到这样的值:

var zTrans = transZRegex.exec(test)[1];

这是一个jsFiddle演示.