0

Here's what I'm trying to figure out:

I have a div with rotateY property applied to it, now i want to get this value using javascript.

<div class="test" style="transform: rotateY(90deg);"></div>

I want to target this div and access its rotateY value, the javascript code should return an integer value of 90

Arun
  • 91
  • 7
  • Unless they are written as inline styles (I think), Transforms get translated to a matrix property, under the hood. To get the matrix of your element, do this: const element = document.querySelector(".test"); const style = getComputedStyle(test); console.log("style:", style["transform"]); Then, you have to learn how to decode the matrix object to see what the rotateY would be. – Maiya Sep 25 '19 at 07:24

3 Answers3

1

You can get the transform style by using element.style.transform and then just replace the non numeric characters with empty.

And if you want to have a number typeof result, just wrap it in a parseInt with 10 radix

const test = document.querySelector('.test');
const stringResult = test.style.transform.replace( /\D+/g, '');
const numberResult = parseInt(stringResult,10)
console.log(stringResult, typeof stringResult)
console.log(numberResult, typeof numberResult)
<div class="test" style="transform: rotateY(90deg);"></div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • I tested this out, and it seems to only work if the style is written inline. Is that true, as far as you know? – Maiya Sep 25 '19 at 07:22
  • @Maiya that is true in general, and does not have anything in particular to do with the transform property. https://stackoverflow.com/a/1098430/10955263 – 04FS Sep 25 '19 at 07:25
  • Thanks. Was asking b/c the getComputedStyle() for transform gives you the matrix, and it would have been nice if there was a way around that. – Maiya Sep 25 '19 at 07:27
  • No, for styles set by `CSS` i think the only way is to use `getComputedStyle` . But for inline styles ( like this question ) you can use `style.nameOfProperty` – Mihai T Sep 25 '19 at 07:28
  • @MihaiT Your answer works perfectly when there is only rotateY on the element as inline style, but it doesn't work if I add rotateX as well on the same element. Could you please give me an answer which decodes rotateY from matrix3D? I really appreciate everyone for the time and effort. Thank you all. – Arun Sep 25 '19 at 08:12
  • Well i gave the answer for your specific question. If your problem is more complex, please post another question or check the ' duplicate ' question and it's answers – Mihai T Sep 25 '19 at 08:18
  • Sure, thanks @MihaiT – Arun Sep 25 '19 at 09:16
0

Javascript Example

function getValue() {
 var tr= document.getElementById('test').style.transform.replace(/[^\d.]/g, '');
 console.log('Rotate: ' + tr + 'deg');
}
<div id="test" style="transform: rotateX(90deg);"></div>
<button onclick="getValue()">get</button>
Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
  • why getElementById ? there is no id in the code of the question. Also, stick to your original answer with `getComputedStyle` . And also, why at click of the button ? Why complicate things ? – Mihai T Sep 25 '19 at 07:29
-1

You need to return a string with value and unit.

var myValue = 90;
document.getElementById('myElement').style.transform = 'rotateY(' + myValue + 'deg)';
Martin Hlouch
  • 9
  • 1