使用 Javascript，如何判断 DOM 元素的字体大小是用 px、em 还是 rem 定义的？ [复制]答案

【问题标题】：With Javascript, how can I tell if a DOM element's font size is defined in px, em or rem? [duplicate]使用 Javascript，如何判断 DOM 元素的字体大小是用 px、em 还是 rem 定义的？ [复制]
【发布时间】：2020-04-08 10:07:58
【问题描述】：

我正在尝试解析网页（实际上是任何网页）并动态地对 DOM 元素的字体大小进行一些调整。

据我所知：

element.style.fontSize 将返回值加单位，例如："11px"，或"1em"，或"1rem"，这对我来说很好，但是...
如果字体大小是通过 css 类定义的，element.style.fontSize 将不返回任何值。因此，如果我想处理所有 DOM 元素（其中大部分不会在其 style 属性中定义其字体大小），我将不得不改用 getComputedStyle，但是...
getComputedStyle 似乎以 px 为单位返回所有字体大小，即使它最初是在 css 中以 em 或 rem 定义的，例如：定义为 "1rem" => getComputedStyle 的字体大小改为返回 "16px"。

出于我的目的，我想知道原始字体大小值及其原始单位，因此获取"1rem" 而不是"16px"。有可能吗？

【问题讨论】：

stackoverflow.com/questions/9730612/… 请看看这个。
Only works in Chrome..

标签： javascript css font-size

【解决方案1】：

如果您尝试动态地调整字体大小，那么.style.fontSize 是您的最佳选择。这是因为内联样式具有更高级别的特殊性，因此您的更改将覆盖样式表中可能存在的任何样式。

.getComputedStyle() 在“应用活动样式表并解决这些值可能包含的任何基本计算之后”返回 CSS 值 after。这意味着考虑到rem 并进行相应调整。话虽如此，如果您需要根据样式表中设置的现有值进行定位，我认为.getComputedStyle() 是最好的选择。它显示计算值的事实不应该有所作为；您仍然可以在转换后操纵“更改”——如果需要，您甚至可以转换回来。

无论哪种方式，您都需要设置属性为.style.fontSize。

【讨论】：

我有点喜欢这个答案......因为只有Chrome supports computedStyleMap() - 除了自己编写一些hacky函数之外 - 为什么设置字体大小很重要？如果您可以将该值转换为px，无论它是如何设置的 - 那应该足够好......
其实我一开始以为我也可以处理px。但是：假设您正在解析嵌套元素。从第一个元素开始，假设您将字体大小增加了 20%。美好的。然后你得到一个子元素。它的字体大小是用 em 定义的，但你不知道。所以你也将它的字体大小增加了 20% 问题是：一旦你将它的父字体大小增加了 20%，孩子的相对字体大小也增加了 20%。所以最后，您将孩子的字体大小增加了 44% 而不是 20%。然后它只会变得更糟。还是我做错了什么？
我终于改变了我的方法。我不是解析一次，而是解析两次。 1. 我存储所有文本元素及其原始（计算）字体大小，以像素为单位。 2.第一次循环完成后，我再次循环，然后调整字体大小。这是我发现解决相对和绝对字体大小的最佳方法，不知道是哪种。