使用 JS 或 Jquery 读取 css 缩放值

Question

我有这个div

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

我如何获得

transform: scale(x,y) 

使用 JS 或 jQuery 的元素。

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

给了我矩阵，但我需要元素中的实际比例值。或者，如果我无法直接获得比例，那么如果我有，将 matrix() 转换为比例的计算是什么

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

Answer 1

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

<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>

您可以在数组元素前面放置一个加号，以确保将它们视为数字。

Answer 2

的可能重复项 获取元素的缩放值？

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)

<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>

该代码段将返回一个包含原始矩阵的数组，然后索引 2 和 3 分别包含 X 和 Y 值。感谢莉亚·维鲁

Answer 3

<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 4

试试这个HTML

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

试试这个 JS

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