如何选择 .getPropertyValue("text-size") 返回的单位； JS查询答案

【问题标题】：How to choose the units returned by a .getPropertyValue("text-size") ; JS query如何选择 .getPropertyValue("text-size") 返回的单位； JS查询
【发布时间】：2021-11-22 16:54:07
【问题描述】：

我想要一个相对值的元素的字体大小；即：“140%”，或者：“更小”。

当我运行显示的代码时，它返回：“22.4px”。

谁能说明如何提取相对值或如何使用绝对值计算相对值以返回 CSS/HTML？

<html>
    <head>
        <style>
            #text {
               font-size: 140% ;
            }
        </style>
    </head>
    <body>
        <section id="text">
             Sample text sample text sample text
        </section>
        <script>
           var o = document.getElementById("text") ;
           var a = window.getComputedStyle(o) ;
           var i = a.getPropertyValue("font-size") ;
           if(i == "140") { //or, 140%, or any other qualitative value, really
                o.style.fontSize = (i - 30) + "%" ;
           }
        </script>
   </body>
</html>

我知道在显示的 sn-p 中，有很多更优雅的方法可以得到我描述的结果，但我选择展示最小的例子，因为我试图实现它的地方有很多“噪音”我已经确认不是问题。

【问题讨论】：

标签： javascript html css

【解决方案1】：

尝试将字体大小转换为相对值，如下所示

const o = document.getElementById("text") ;
const a = window.getComputedStyle(o) ;
const i = parseFloat(a.getPropertyValue("font-size").match(/[\d\.]+/)[0]) ;

const fontScale = (i * 100) / 16; // 16px is a base font
if(fontScale === 140) { //or, 140%, or any other qualitative value, really
  o.style.fontSize = (fontScale - 30) + "%" ;
}

【讨论】：

你能解释一下'16px ia a base font'部分吗？如果em（或rem）的大小已经改变了怎么办？我只是不明白您如何以这种方式获得 % 值。
默认浏览器字体大小为 16px，直到您更改它。等于 1rem，rem 值永远不会改变。另一方面 getPropertyValue("font-size") 总是返回像素。在您的情况下，“22.4px”是 16px 的 140%。因此，如果要将 px 转换回百分比，则需要将比例计算为 (sizeInPixels * 100) / 16，返回 140 然后您可以验证数字到数字并决定下一步做什么
我同意通常默认浏览器字体大小为 16px（我认为是传统而不是标准），但用户可以在浏览器设置中更改它，因此您不能假设 16px。如果我将 Edge 保持在中等设置，我会得到 22.4 像素，但如果我将其设置为“大”，我会得到 28 像素。
可以随时获取浏览器默认字体大小stackoverflow.com/questions/1442542/…
这是一个有用的链接，谢谢（虽然有些答案有点狡猾，最近的很好）。我认为如果您在答案中使用 html 元素的计算样式 font-size 而不是 16 会更安全。它会回答已经提出的问题，虽然不处理更复杂的情况，但我想这里不需要它们。