获取元素计算后的css属性的时候,我们一般会用到getComputedStyle和getCurrentStyle,两个方法,由于兼容性问题,我们一般会做如下处理:

function getStyle(el,attr){
    return window.getComputedStyle?window.getComputedStyle(el,null)[attr]:el.getCurrentStyle[attr];
}

如果要获取transform的值的话同理:

getStyle(el,'transform');

获取的结果是这样:

blob.png

如果只要获取translateX或translateY的值怎么做?我想到的是使用正则匹配获取:

function getTranslateX(el){
    return getTranslate(el)[4];
}
function getTranslate(el){
    var attr = getStyle(el,'transform');
    var pattern = /\((.+)\)/;
    return pattern.exec(attr)?pattern.exec(attr)[1].split(',').map(function(el){
        return Number(el);
    }):[];
}
function getTranslateY(el){
    return getTranslate(el)[5];
}