Read Css Scale Value Using Js Or Jquery

I have this div

How do I get the transform: scale(x,y) of an element using JS or jQuery. $('#id').css('transform') give

Solution 1:

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)

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="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

Solution 2:

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid='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.

Solution 3:

<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

Solution 4:

Try this HTML

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

Try this JS

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