如何在 HTML 中获取字体大小

Question

我在这里读了一个问题，试图获取文本的字体大小。他们给出的答案是使用测量方法得到像素大小。我想要做的就是获取字体大小值，以便我可以更改它。

例如：

 var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

这个例子不起作用，虽然这两个做

1. document.getElementById("foo").style.fontSize = "larger";
2. document.getElementById("foo").style.fontSize = "smaller";

唯一的问题是它只更改一次大小。

原文由 Mark Walsh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅获取元素的 style.fontSize 可能不起作用。如果 font-size 由样式表定义，这将报告 "" （空字符串）。

您应该使用 window.getComputedStyle 。

 var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

原文由 Paul Armstrong 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您的元素没有 font-size 属性，您的代码将返回空字符串。您的元素不必具有 font-size 属性。该元素可以继承父元素的属性。

在这种情况下，您需要找到计算出的字体大小。试试这个（不确定 IE）

 var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize;

console.log(computedFontSize);

变量 computedFontSize 将返回带单位的字体大小。单位可以是 px、em、%。您需要剥离单元以进行算术运算并分配新值。

原文由 kiranvj 发布，翻译遵循 CC BY-SA 4.0 许可协议