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

Question

我在 JavaScript 代码中使用以下两种方法获取 DOM 中 span 的 font-size:

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"

这些值是一致的；这很好。

在span上没有直接的CSS样式，但是在parent h2上通过样式表有直接的样式，如下: 字体大小:5rem;

在 (Chrome) 控制台中查看 span 的 computed font-size 我看到它是:

80px

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

如果我将元素 font-size 的值设置为任一返回值，那么显示的文本大小显然会显着缩小。

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

提前致谢。

Answer 1

好的，事情是这样的……在网上搜索时，我记得在某个地方读到过，样式的更改可以相对于您从中观察状态的线程异步发生。

因此，我将这段代码混合在一起:

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

现在我得到 font-sze 的 预期 值为 80px。

我可以用那个……

问题已解决。