Question

我希望通过JavaScript从内嵌css中获取translateY值。

这是内嵌值：

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

请参阅显示这两种方法的this fiddle（请注意，我一直在使用chrome进行测试，因此我使用-webkit-为CSS添加了前缀。）

修改
要获得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

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

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

并获得如下值：

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

Here是一个jsFiddle演示。

Answer 3

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 4

如果您具有多个转换属性，则可能需要计算.slice（x，y）的x和y

  const trsString = element.style.transform; //eg "translateY(36px)"
  let num = trsString.slice(11, trsString.length - 3) 
  num = num.length == 0 ? 0 : parseInt(num) // will be 36

Answer 5

要获取不带“ px”的原始值，您可以使用以下代码：

function extractTranslateFromTransform(transform) {
    let translateValue = null;
    let translate = transform.match(/translate\(.*\)/)?.[0];
    if (translate) {
        translateValue = {};
        if (translate.indexOf(',') !== -1) {
            translateValue.x = parseFloat(translate.substring(translate.indexOf('(') + 1, translate.indexOf(',')));
            translateValue.y = parseFloat(translate.substring(translate.indexOf(',') + 1));
        } else {
            translateValue.x = translateValue.y = parseFloat(translate.substring(translate.indexOf('(') + 1));
        }
    }
    return translateValue;
}

const translate = extractTranslateFromTransform(document.getElementById('divWithTransform').style.transform);

console.log(translate);

<div id="divWithTransform" style="transform: translate(0px, -13361.5px) scale(1) translateZ(0px);" />

如何获得translateX和translateY的价值？

5 个答案: