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.

Shashank Agrawal · Accepted Answer · 2016-07-21 07:13:55Z

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

edited Jul 21, 2016 at 7:13

answered Jul 21, 2016 at 6:56

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michael Commons Over a year ago

this is what i was looking for, thanks. But how about if i don't assign any class name to that span? how to get it ? div children are undefined

Shashank Agrawal Over a year ago

You can change your selector to something like this: document.querySelector('.starting-point span')

Shashank Agrawal Over a year ago

Glad this helped!!

Shashank Agrawal Over a year ago

Yes, that method is not a DOM or jQuery method. You can try this instead: getComputedStyle($('.starting-point span')[0], null).getPropertyValue('transform') ;

Michael Commons Over a year ago

Edit 2 is exactly what i was looking for :)

Alan · Accepted Answer · 2016-07-21 07:16:14Z

3

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

answered Jul 21, 2016 at 7:16

Alan

2772 silver badges5 bronze badges

Comments

Shashank Agrawal · Accepted Answer · 2016-07-21 12:47:35Z

3

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

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

edited Jul 21, 2016 at 12:47

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

answered Jul 21, 2016 at 7:04

Anonymous Duck

3,0081 gold badge14 silver badges35 bronze badges

Comments

F. Müller · Accepted Answer · 2021-09-15 20:03:40Z

1

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)

edited Sep 15, 2021 at 20:03

F. Müller

4,0629 gold badges44 silver badges53 bronze badges

answered Sep 15, 2021 at 16:13

Tumo Segwabe

111 bronze badge

Collectives™ on Stack Overflow

Getting the transform class property of an element in Javascript

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related