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

【问题标题】：DOM element computed style font size too smallDOM 元素计算的样式字体大小太小
【发布时间】：2020-03-21 12:20:40
【问题描述】：

我在 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 样式，但是通过样式表在 parenth2 上有直接的样式，如下：font-size: 5rem;

在（Chrome）控制台中查看span 的计算 font-size 我发现它是：

80px

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

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

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

谢谢，提前。

【问题讨论】：

标签： javascript html css font-size

【解决方案1】：

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

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

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

希望对你有帮助...

【讨论】：

感谢您的回复，非常感谢。我尝试了您的建议，发现它也返回“25.6px”。这与前两个结果一致，但与之前的渲染体验不一致。嗯……
哦，可能是受父级“h2”字体大小样式单位（rem）的影响。尝试通过将“h2”字体大小单位更改为“px”或其他方式来测试结果。虽然我知道这很奇怪:)

【解决方案2】：

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

所以，我将这段代码放入了混合中：

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

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

我可以用那个…

问题解决了。

【讨论】：