如何获取父元素应用scale后DOM元素的实际计算字体大小？

问题 #

我需要获取父元素应用transform: scale()后，子DOM元素的实际显示字体大小。示例中有两个文本块，均设置font-size: 49px：

• 第一个文本块位于无缩放的父元素内，预期实际大小为49px
• 第二个文本块位于设置了transform: scale(0.741)的父元素内，预期实际大小为49px * 0.741 = 36.3px

但使用jQuery获取计算样式时，返回的始终是未缩放的原始字体大小：

$("#output1").text($("#entry1").css('font-size')) // 输出49px
$("#output2").text($("#entry2").css('font-size')) // 输出49px，而非预期的36.3px

示例HTML结构：

<div id="unscaled">
      <span id="entry1" style="font-size: 49px">Australia</span>
</div>
<div id="output1"></div>

<div id="scaled"  style="transform: scale(0.741)">
    <span id="entry2" style="font-size: 49px">Australia</span>
</div>
<div id="output2"></div>

解决方案 #

transform: scale()仅作用于视觉渲染，不会修改元素的计算样式属性（包括font-size），因此直接读取计算样式无法得到视觉缩放后的大小。需要通过以下步骤计算实际显示大小：

实现步骤 #

1. 获取子元素的原始计算字体大小
2. 解析父元素的transform样式，提取缩放比例
3. 将原始字体大小与缩放比例相乘，得到视觉上的实际大小

代码实现 #

// 获取元素的计算字体大小（数值）
function getRawFontSize(element) {
  const computedSize = window.getComputedStyle(element).fontSize;
  return parseFloat(computedSize);
}

// 获取父元素的缩放比例（默认等比缩放，取水平缩放值）
function getParentScaleRatio(element) {
  const parent = element.parentElement;
  const transformStyle = window.getComputedStyle(parent).transform;
  
  if (transformStyle === 'none') return 1;
  
  // 解析transform矩阵，提取缩放值
  const matrixValues = transformStyle.match(/matrix\(([^)]+)\)/)[1].split(',').map(val => parseFloat(val));
  // matrix(a,b,c,d,e,f) 中a是水平缩放，d是垂直缩放
  return matrixValues[0];
}

// 计算并显示结果
// 处理未缩放元素
const rawSize1 = getRawFontSize(document.getElementById('entry1'));
document.getElementById('output1').textContent = `${rawSize1}px`;

// 处理缩放元素
const rawSize2 = getRawFontSize(document.getElementById('entry2'));
const scaleRatio = getParentScaleRatio(document.getElementById('entry2'));
const actualSize2 = (rawSize2 * scaleRatio).toFixed(1);
document.getElementById('output2').textContent = `${actualSize2}px`;

关键说明 #

• window.getComputedStyle()返回的是元素的逻辑计算样式，不受视觉变换影响
• CSS transform矩阵的matrix(a,b,c,d,e,f)中，a和d分别对应水平和垂直缩放比例，若为非等比缩放可根据需求选择对应值
• 最终结果通过toFixed(1)保留一位小数，匹配预期的36.3px格式

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