Angular - 如何获取元素的宽度和高度

Posted 2023-02-22

【中文标题】Angular - 如何获取元素的宽度和高度

【英文标题】：Angular - How to get an element's width and height

【发布时间】：2019-12-29 19:10:10

【问题描述】：

如何获取表格第一个 td 元素的宽度和高度？

<div class="page">
  <table>
   <tr>
     <td></td>
     ...
   </tr>
</div>

【问题讨论】：

使用@ViewChild 获取所需元素的ElementRef。在此您可以访问el.nativeElement.offsetWidth 等属性，其中el 是对元素的引用。

表格行和列是由ngFor生成的所以我宁愿不

【参考方案1】：

您可以使用 clientHeight 和 clientWidth - 请注意，queryAll 选择器仅针对此演示中的单个 td - 您需要扩展该选择器以获得您所追求的正确 TD。

let tableCell = document.querySelector('td');

let cellWidth = tableCell.clientWidth +'px';
let cellHeight = tableCell.clientHeight +'px';


console.log('width: ' + cellWidth, ' / height: ' + cellHeight);

<div class="page">
  <table>
   <tr>
     <td>Test</td>
   </tr>
  </table>
</div>