Question

我有这个div

<div style="transform: scale(2,3)"></div>

我如何获得

transform: scale(x,y)

使用JS或jQuery的元素。

$('#id').css('transform')

给我矩阵，但我需要我元素的实际比例值。或者如果我不能直接获得比例，那么如果我有

，将矩阵（）转换为比例的计算是什么

var mt = matrix(....); how do I then convert mt[0] and mt[3] to actual scale values.

Answer 1

Get the scale value of an element?可能重复：

＆＃13;

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/;
var matches = $('#id').css('transform').match(matrixRegex);
console.log(matches)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id" style="transform: scale(2,3)"></div>

＆＃13;

该片段将返回包含原始矩阵的数组，然后索引2和3分别包含X和Y值。感谢Lea Verou

Answer 2

<div id="container" style="transform: scale(2,3)"></div>

然后

var vals = $('#container').css('transform').replace(/\(|\)|scale/g,'').split(',')

现在，您将vals中的比例值作为字符串，只需将parseFloat(vals[0])和parseFloat(vals[1])解析为数字即可获得x和y的值

Answer 3

＆＃13;

var m = $('#id').css('transform');
var mt = m.substring(m.indexOf('(') + 1, m.indexOf(')')).split(',');
// or else: var mt = m.substring(7, m.length - 1).split(',');
console.log(mt[0], mt[3]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='id' style="transform: scale(2,3)"></div>

＆＃13;

您可以在数组元素前加上一个加号，以确保它们被视为数字。

Answer 4

试试这个HTML

<div id="container" style="transform: scale(2,3)"></div>

试试这个JS

console.log($('#container').attr('style'))

使用JS或Jquery读取css比例值

4 个答案: