Getting javascript element property class property conversion

Question

I want the two events to depend on the scale property in the menu. So this is mine 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 transform: scaleX(1) scaleY(1)in a variable? Sometimes the values scaleX(0) scaleY(0)and I want to perform different actions depending on these values.

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

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

Many thanks.

Answer 1

Here you go:

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

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

Change 1:

If you prefer not to add a class, you can change your code as follows:

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

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

Edit 2:

, jQuery:

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

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

Answer 2

jquery, , API

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

Answer 3

You can also use a more general method using regular expressions.

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

Having received all your conversion properties, you can get a specific property based on your index value. For instance:

console.log(values[0]);