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

m528fe3b 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(120)

有没有一种方法可以得到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
参见Get computed font size for DOM element in JS

jquery

来源：https://stackoverflow.com/questions/77298981/get-computed-font-size-for-dom-element-in-js-after-scale

1条答案

按热度按时间

093gszye1#

在从window对象应用缩放变换之后获得scaleFactor将使您获得解决方案，因为您已经自己找到了最终解决方案;把这个作为答案贴在这里：

$("#output1").text($("#entry1").css('font-size'))
$("#output2").text($("#entry2").css('font-size'))

let elemt2 = $("#entry2")[0]
var scaleX = elemt2.getBoundingClientRect().width / elemt2.offsetWidth;
$("#output3").text(scaleX)

* {
  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"></div>
    <div id="output3"></div>

赞(0）回复(0）举报 2023-10-17

我来回答

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

1条答案

相关问题

热门标签

最新问答