jQuery/JS – 以 CSS 中设置的单位获取字体大小（vw 单位）

Question

我已经使用 vw 设置了我的字体大小，但想在 jQuery 中检索此值，但是当我使用 $('.textarea').css('font-size'); 时，它 return 是 px 等效项比 vw 单位。

有什么方法可以return 正确的规定值吗？

Answer 1

一旦你有了以 px 为单位的值，将它乘以 100/($(window).width())

例如（在你的情况下）：

$('.textarea').css('font-size')*(100/($(window).width()))

如果有效请告诉我

Answer 2

当使用 jQuery .css('font-size') 时，返回的值将始终是计算出的字体大小（以像素为单位）而不是使用的值（vw、em、%、 ETC）。您需要将此数字转换为您想要的值。

（以下以字号24px，window宽度1920px为例）

要将 px 转换为 vw，首先将计算出的字体大小转换为数字。

// e.g. converts '24px' into '24'
fontSize = parseFloat($('.textarea').css('font-size'));

接下来，将此数字乘以 99.114 除以 window 宽度。（通常在将 px 转换为 vw 时，您会将 100 除以 window 宽度，但我发现在转换字体大小时结果略有不正确）。

// returns 1.2389249999999998
fontSize = fontSize * (99.114 / $(window).width());

您可以选择通过四舍五入到最接近的第 100 位小数来清除返回的大小数。

// returns 1.24
fontSize.toFixed(2)

现在您有了所需的最终数字，只需在需要的地方手动添加 'vw'。

// returns 1.24vw
fontSize = fontSize + 'vw';

当然，如果你想缩短代码，你可以把这些放在一起

// returns 1.24vw
newFontSize = (parseFloat($('.textarea').css('font-size'))*(99.114/ $(window).width())).toFixed(2) + 'vw';

jQuery/JS – Get font-size in unit set in CSS (vw units)