javascript - 如何使用女巫设置为百分比的jquery直接获取转换的css值

Question

我设置了 transform: translate(200%, 700%);

当我尝试通过下面的代码阅读它时，它把这个值作为 px:

calculateAllowed = function (obj) {
        var matrix = $(obj).css('transform');
        alert(matrix);
        var values = matrix.match(/-?[\d\.]+/g);
        var x = values[4];
        alert(x);
};

x是一个整数

我希望得到 200 或“200%”。 我怎样才能得到我第一次设置的百分比？

Answer 1

你需要用它除以宽度再乘以 100 得到百分比形式。

function calculateAllowed(obj) { //just for easy testing
        var matrix = $(obj).css('transform');
        console.log(matrix);
        var values = matrix.match(/-?[\d\.]+/g);
        var x = values[4];
        var end = x / $(obj).width() * 100;
        console.log(end);
};

calculateAllowed( $("div") )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="transform: translate(200%, 700%)" >afwe</div>