我在 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
中文本的实际计算字体大小?
提前致谢。
最佳答案
好的,事情是这样的……在网上搜索时,我记得在某个地方读到过,样式的更改可以相对于您从中观察状态的线程异步发生。
因此,我将这段代码混合在一起:
setTimeout(() => {
console.log(element.computedStyleMap().get('font-size'));
}, 0);
现在我得到 font-sze
的 预期 值为 80px
。
我可以用那个……
问题已解决。
关于javascript - DOM 元素计算样式字体大小太小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59044869/