1

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
WasiF
  • 26,101
  • 16
  • 120
  • 128
  • Take a look at https://developer.mozilla.org/ru/docs/Web/API/Window/getComputedStyle – Vayrex Mar 26 '18 at 15:30
  • please have a look at required output, I updated the question, please review – WasiF Mar 26 '18 at 15:33
  • your given link doesn't fulfill the requirement. Please suggest me the proper code – WasiF Mar 26 '18 at 15:37
  • Yeah no. That's not gonna happen. Transform doesn't work like that. – Darkrum Mar 26 '18 at 15:37
  • @mwn it is not a place where people have to do things for you. If element has not css style attribute, but css attribute comes from css stylesheet file, you can use getSomputedStyle. Also it is simple enough. – Vayrex Mar 26 '18 at 15:46
  • @Vayrex this is of the best place where people help others excepts arrogant like you. look the answer, someone try to answer this problem. – WasiF Mar 26 '18 at 15:59
  • @Vayrex So you found the accounts who can downvote the question. – WasiF Mar 26 '18 at 16:17
  • 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 Mar 28 '18 at 11:22
  • @Vayrex you are right but there are consequences when someone posts the question on stack-overflow. I searched for that problem for some time but could not get the required result then I preferred to ask a question instead of spending more time on simple things. – WasiF Mar 28 '18 at 11:37

1 Answers1

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

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

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

Taki
  • 17,320
  • 4
  • 26
  • 47