Getting the transform class property of an element in Javascript

Question

I want to make two events depends on a scale property of a menu. So this is my div:

<div class="starting-point">
    <span class="" style="transform: scaleX(1) scaleY(1); height: 2760.56px; width: 2760.56px; top: -1380.28px; left: -1380.28px;"></span>
</div>

How can I get the transform: scaleX(1) scaleY(1) into a variable? Sometimes the values are scaleX(0) scaleY(0) and I want to perform different actions depending on these values.

I assigned dddd class to that span and I tried this, but there is no scale or something useful in the results.

var style = getComputedStyle(document.getElementsByClassName('dddd')[0])

Thanks a lot.

Answer 1

Here you go:

var style = getComputedStyle(document.getElementsByClassName('dddd')[0], null);

console.log(style.getPropertyValue('transform'));

Edit 1:

If you prefer not to add the class, you can change your code like this:

var style = getComputedStyle(document.querySelector('.starting-point span'), null);

console.log(style.getPropertyValue('transform'));

Edit 2:

You can change it to use jQuery selector as well:

var style = getComputedStyle($('.starting-point span')[0], null);

console.log(style.getPropertyValue('transform'));

Answer 2

You could also use a more generic method by using regular expressions.

var matrix = $('.selector').css('transform');
var values = matrix.match(/-?[\d\.]+/g);

This will get all your transform properties you could then get a specific property based on your index value. Such as:

console.log(values[0]);