I want to get transform value of html-element

<div (click)="onClick($event)"></div>

onClick(element: HTMLElement) {
    console.log(element.style.transform); // output: translate(0px, 0px)
}

but I want these values as numbers i.e. something like this

x = element.style.transform.translate.x; // output x = 0
y = element.style.transform.translate.y; // output y = 0

I want to get transform value of html-element

<div (click)="onClick($event)"></div>

onClick(element: HTMLElement) {
    console.log(element.style.transform); // output: translate(0px, 0px)
}

but I want these values as numbers i.e. something like this

x = element.style.transform.translate.x; // output x = 0
y = element.style.transform.translate.y; // output y = 0

• javascript
• angular
• typescript

Share Improve this question Follow edited Mar 26, 2018 at 15:31 WasiF asked Mar 26, 2018 at 15:27 WasiFWasiF 29k1616 gold badges130130 silver badges136136 bronze badges 9

• Take a look at developer.mozilla/ru/docs/Web/API/Window/getComputedStyle – Vayrex Commented Mar 26, 2018 at 15:30
• please have a look at required output, I updated the question, please review – WasiF Commented Mar 26, 2018 at 15:33
• your given link doesn't fulfill the requirement. Please suggest me the proper code – WasiF Commented Mar 26, 2018 at 15:37
• Yeah no. That's not gonna happen. Transform doesn't work like that. – Darkrum Commented Mar 26, 2018 at 15:37
• 1 @mwn When I was a trainee/junior dev, I was asking a lot of simple questions to my boss. After a while he told: "Guys it seems that you will be asking soon, do I need to press this button or not ?". I was thinking that he is not right, but after a month I learned a lot of small things by self and studied to do research and learn things fast. So for developer who want to be a good dev, must be able to work with docs and do research. Also I have done vote down only after you told that I'm arrogant. – Vayrex Commented Mar 28, 2018 at 11:22

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 7

here's how you get the values of translate x,y :

var style = window.getComputedStyle(element);
var matrix = new WebKitCSSMatrix(style.webkitTransform);
console.log('translateX: ', matrix.m41);
console.log('translateY: ', matrix.m42);

puted style : https://developer.mozilla/ru/docs/Web/API/Window/getComputedStyle

matrix.* : Get the value of -webkit-transform of an element with jquery