如何通过jquery获得div元素的translateY值

Question

如题。我如果利用$("div").css("transform")来获取会得到一个矩阵字符串，请问如何获得具体的translateY值

Answer 1

可以用正则表达式来解析这个Y值：

$('div').css('transform').match(/matrix\(\d+, \d+, \d+, \d+, \d+, (\d+)\)/)[1]

或者，更“模糊”一点儿的匹配：

$('div').css('transform').match(/matrix.*, (\d+)\)/)[1]

Answer 2

正则表达式：

HTML

<p style="transform:rotate(45deg);"></p>
<p style="transform:rotate(45deg) translate(5px,2px);"></p>
<p style="transform:translate3d(5px,2px,9px);"></p>
<p style="transform:translateY(2px);"></p>
<p style="transform:matrix(0,0,0,0,0,2);"></p>

JavaScript

var getTranslateY = function(node){
    var regRule = /translate(Y|\dd)?\(\s*(\w+\s*,)?\s*([^,]+)(\s*,[^)]+)?\s*\)/;
    var regRule2 = /matrix\(.*,\s*(\w+)\s*\)/;
    var transform = node.style.transform;
    var reg;
    if(!transform){
        return null;
    }
    reg = regRule.exec(transform);
    if(null === reg){
        reg = regRule2.exec(transform);
        return reg ? reg[1] : null;
    }
    return reg[3];
}

var pNodes = document.getElementsByTagName('p');

for(var i = 0,l = pNodes.length;i < l;++i){
    console.log(getTranslateY(pNodes[i]));
}

Answer 3

获得矩阵变换

let transform = $(targetNode).css('transform')
// matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)
let transformMatrix = transform.slice(7, transform.length - 1).split(', ')
// ["6.12323e-17", "1", "-1", "6.12323e-17", "0", "0"]

矩阵各个值

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)