如何在Angular 5中获取HTML元素的变换值

Question

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 ie something like this

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

Answer 1

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