Read css scale value using JS or Jquery

Question

I have this div

How do I get the

transform: scale(x,y) 

Answer 1

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

and then

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

Now, you have the scale values in vals as string, just parse parseFloat(vals[0]) and parseFloat(vals[1]) to number to get the value of x and y

Answer 2

Possible duplicate of Get the scale value of an element?:

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>

That snippet will return an array with the original matrix, and then indexes 2 and 3 contain X and Y values, respectively. Credit to Lea Verou

Answer 3

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>

You can put a plus sign in front of the array elements to ensure they are treated as numeric.

Answer 4

Try this HTML

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

Try this JS

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