typescript 如何在Angular 14指令中获取元素的字体大小

lqfhib0f 于 2023-03-31 发布在 TypeScript

关注(0)|答案(2)|浏览(110)

我有一个指令，可以通过以下方式获取组件：

constructor(private el: ElementRef) {
    const element = this.el.nativeElement;
    /* Extra code */
}

现在我需要得到inhheirted最终的字体大小，但试图做到：
fs = window.getComputedStyle(element).getPropertyValue('font-size');
或
fs = element.style.fontSize;
不返回任何值，只是一个空字符串。
同样，这个question也没有帮助，因为 Package 和注入窗口对象会导致相同的结果
有没有办法获取当前组件的字体大小？

typescript

来源：https://stackoverflow.com/questions/75864855/how-to-get-font-size-of-element-inside-angular-14-directive

2条答案

按热度按时间

2exbekwf1#

需要注意的是，getComputedStyle方法返回计算样式，这意味着它在考虑了从父元素继承的任何样式或通过CSS规则应用的样式之后计算最终样式。

constructor(private el: ElementRef) {
  const element = this.el.nativeElement;
  const computedStyle = getComputedStyle(element);
  const fontSize = computedStyle.getPropertyValue('font-size');
  console.log(fontSize);
}

如果仍然返回空字符串，请确保元素实际应用了字体大小样式。您可以在浏览器的开发人员工具中检查应用于元素的CSS样式。
另一件需要考虑的事情是，如果字体大小是通过CSS类设置的，则需要确保在调用getComputedStyle之前将该类应用于本机元素。

赞(0）回复(0）举报 2023-03-31

k97glaaz2#

您可以直接从computedStyle访问，如下所示。
getComputedStyle(element).fontSize
如果样式被添加为内联，那么下面应该可以工作
element.style.fontSize

赞(0）回复(0）举报 2023-03-31