javascript - 如何通过jquery获得div元素的translateY值-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

怪我咯 2017-04-10 15:39:01

[JavaScript讨论组]

666

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

怪我咯

走同样的路，发现不同的人生

全部回复(2)

大家讲道理2017-04-10 15:41:01 2楼

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

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

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

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

赞 +0

添加回复

大家讲道理2017-04-10 15:41:01 1楼

正则表达式：

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]));
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>