获取 JS 中 DOM 元素的计算字体大小...缩放后

Question

有没有办法在应用父元素的缩放属性后获取 DOM 元素的计算字体大小？

在下面的示例中，有两个文本块，每个文本块都带有

font-size: 49px

，但其中一个出现在 CSS 中具有

transform: scale(0.741)

的父元素中。

我希望第一个元素的字体大小为 49px，第二个元素的字体大小为 (49px * 0.741) = 36.3px。

有没有办法获取缩放后的字体大小？

<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">

我想简单地迭代每个跨度并获取其计算样式。但 jQuery 似乎返回未缩放的字体大小（“49px”）而不是缩放的字体大小（0.741 * 49 = 36.3px）

$("#output1").text($("#entry1").css('font-size')) // 49px
$("#output2").text($("#entry2").css('font-size')) // 49px not 36.3px

Codepen 在这里：https://codepen.io/__proto__/pen/WNLByMZ?editors=1111

参见 获取 JS 中 DOM 元素的计算字体大小

Answer 1

您可以尝试以下代码来达到您的目的：

$(document).ready(function() {
  var originalFontSize1 = parseFloat($("#entry1").css('font-size'));
  var originalFontSize2 = parseFloat($("#entry2").css('font-size'));

  var scaleFactor2 = parseFloat($("#scaled").css('transform').split('(')[1].split(')')[0]);

  var scaledFontSize2 = originalFontSize2 * scaleFactor2;

  $("#output1").text(originalFontSize1);
  $("#output2").text(scaledFontSize2);
});

* {
  border: 1px dashed grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="unscaled">
      <span id="entry1" val="Australia" style="font-size: 49px">Australia</span>
    </div>
  <div id="output1"></div>

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

说明：