javascript - 如何在 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";

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

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';