如何通过jQuery的$(e).css('font-size')获取百分比形式的字号？

$(e).css('font-size') 返回的是浏览器计算后的实际像素值——因为浏览器会自动将百分比、em这类相对单位转换为绝对像素值进行渲染。要获取原始的CSS声明值（比如示例中的100%），需要直接从样式表中查找对应规则，而非依赖计算后的渲染样式。

方法一：遍历样式表查找对应规则 #

通过遍历页面中所有样式表及其规则，匹配目标元素的选择器，提取对应的font-size声明值。

示例代码：

jQuery(function($) {
  function getOriginalFontSize(element) {
    var targetSelector = getElementSelector(element);
    // 遍历所有样式表
    for (var i = 0; i < document.styleSheets.length; i++) {
      var sheet = document.styleSheets[i];
      var rules = sheet.cssRules || sheet.rules; // 兼容不同浏览器的样式表规则属性
      if (!rules) continue;
      
      // 遍历当前样式表的所有规则
      for (var j = 0; j < rules.length; j++) {
        var rule = rules[j];
        // 检查规则选择器是否匹配目标元素
        if ($(element).is(rule.selectorText)) {
          if (rule.style.fontSize) {
            return rule.style.fontSize;
          }
        }
      }
    }
    // 未找到原始声明时，返回计算后的像素值作为降级方案
    return $(element).css('font-size');
  }

  // 生成元素的基础选择器（可根据实际场景扩展id、class等匹配逻辑）
  function getElementSelector(element) {
    return element.tagName.toLowerCase();
  }

  alert(getOriginalFontSize($('div')[0])); // 输出 100%
});

注意事项： #

• 若样式表为跨域加载，会因同源策略限制无法读取其规则。
• 选择器匹配逻辑需根据实际场景完善，比如处理class、id、复合选择器等复杂情况。

方法二：处理内联样式（仅适用于内联设置的场景） #

如果元素的font-size是通过style属性直接设置的，可以解析内联样式字符串：

var inlineStyle = $('div').attr('style');
if (inlineStyle) {
  var fontSizeMatch = inlineStyle.match(/font-size:\s*([^;]+)/);
  if (fontSizeMatch) {
    alert(fontSizeMatch[1]); // 若内联设置了font-size:100%，则返回100%
  }
}

误区说明 #

window.getComputedStyle(element).fontSize 和 $(e).css('font-size') 效果完全一致，都会返回浏览器计算后的像素值，无法获取原始的百分比声明。

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