如何让JS的.getPropertyValue('font-size')返回相对单位而非px绝对值

window.getComputedStyle 返回的是浏览器解析后的最终计算样式，所有相对单位（%、em、smaller等）都会被换算为px绝对值，所以无法直接通过这个API获取样式表里写的原始相对单位定义。

方案1：读取样式表中的原始相对值 #

如果需要拿到CSS代码里写的原始单位内容，可以遍历样式表匹配对应选择器的规则：

let rawFontSize = null
// 遍历所有引入的样式表
for (let sheet of document.styleSheets) {
  try {
    for (let rule of sheet.cssRules) {
      // 匹配目标元素的选择器
      if (rule.selectorText === '#text') {
        rawFontSize = rule.style.getPropertyValue('font-size')
        break
      }
    }
    if (rawFontSize) break
  } catch (err) {
    // 跨域样式表会触发权限报错，直接忽略即可
  }
}
// 此时rawFontSize就是你写的 "140%" 原始值

注意：该方法仅能读取样式表中固定写死的规则，无法读取JS动态设置的、继承来的相对值，也无法读取跨域引入的样式表内容。

方案2：将px绝对值换算为需要的相对单位 #

如果没有获取原始值的需求，只需要把拿到的px值转为可用的相对单位，按对应基准值计算即可：

• 转相对于父元素字体大小的%/em：

const o = document.getElementById("text");
// 获取当前元素计算后字体大小数值
const currentPx = parseFloat(getComputedStyle(o).getPropertyValue("font-size"));
// 获取父元素计算后字体大小数值
const parentPx = parseFloat(getComputedStyle(o.parentElement).getPropertyValue("font-size"));
// 换算为百分比
const percentVal = `${Math.round(currentPx / parentPx * 100)}%`;

• 转相对于根元素的rem：

const rootPx = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("font-size"));
const remVal = `${(currentPx / rootPx).toFixed(2)}rem`;

你现有代码中直接拿计算后样式和"140"判断肯定不成立，拿到的是带px后缀的字符串，需要先转成数字再按上面的方法换算后再做逻辑判断和赋值。

内容的提问来源于stack exchange，提问作者Esdeseserdt