Question

我使用以下两种JavaScript代码在DOM中获得font-size的{{1}}：

span

此代码使用两种方法获得相同的值。第一个调用（const element = document.querySelector('h2 span'); const fontSizeObj = element.computedStyleMap().get('font-size'); const fontSizeStr = window.getComputedStyle(element, null).getPropertyValue('font-size');）有效返回以下内容：

fontSizeObj

第二个调用（{value: 25.600000381469727, unit: "px"}）返回以下内容：

fontSizeStr

这些值是一致的；很好。

"25.6px"上没有直接的CSS样式，但是 parent span上却通过样式表具有直接的样式，如下所示：h2 < / p>

在font-size: 5rem;的计算 font-size的（Chrome）控制台中，我发现它是：

span

此控制台值与上面返回的值有很大不同。此控制台值还对应于浏览器中文本的已查看/渲染大小。

如果我将元素80px的值设置为两个返回值之一，则显示的文字大小会明显缩小。

那么，如何获取font-size中文本的实际计算字体大小？

谢谢。

Answer 1

好吧，这就是事情……在Internet上拖网时，我回想起在某处读到的内容，即样式的更改可能与观察状态的线程异步发生。

因此，我将这段代码放入了组合：

setTimeout(() => {
  console.log(element.computedStyleMap().get('font-size'));
}, 0);

现在我将font-sze的 expected 值设为80px。

我可以解决...

问题已解决。

Answer 2

您可以使用window.getComputedStyle来计算跨度的字体大小。

 let spanEl = document.getElementsByTagName("span");

 console.log(window.getComputedStyle(spanEl[0]).fontSize)

希望对您有帮助...

DOM元素计算的样式字体大小太小

2 个答案: