Как получить стиль от цели события click?

Question

В таблице угловых материалов слева на первой ячейке имеется отступ 24 пикселя:

td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type, th.mat-header-cell:first-of-type {
    padding-left: 24px;
}

Как мне его получить?ev.target.style.paddingLeft пусто.

stackblitz

Answer 1

Вы можете достичь желаемого, передав элемент DOM в качестве параметра шаблона:

<th mat-header-cell *matHeaderCellDef #parameter (click)="cellClick($event, parameter)" > No. </th>

cellClick(ev: MouseEvent, element: HTMLElement) {
 console.log(element.offsetWidth);
}

Answer 2

Метод window.getComputedStyle() используется для получения текущих, фактических свойств элемента. window.getComputedStyle(myElement).paddingLeft даст вам фактический левый отступ вашего элемента (с «px» в конце). Чтобы вычислить ширину элемента + отступ слева, используйте следующее:

+window.getComputedStyle(myElement).paddingLeft.slice(0, -2) + 
+window.getComputedStyle(myElement).width.slice(0, -2);

Если ширина фиксированная и никогда не изменяется, просто используйте myElement.width вместо getComputerStyle();