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.

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.

• javascript
• jquery
• html
• css

4 Answers 4

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

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

Since you are adding jquery tag it is cleaner if you used its APIs

var style = $('.starting-point span').attr('style').split(';')[0];

NB: transform_target here for me is the scale;

var variable = $('.classTarget').css('transform','transform_target')[array index]
var newVariable = varaible.style.transform.match(/(-?[0-9\.]+)/g)[array index you want]

console.log(newVariable)