如何获取HTML中的字体大小

Question

我在这里阅读一个问题，试图获取文本的字体大小。他们给出的答案是使用测量方法获得像素大小。我想要做的就是获取字体大小值，以便我可以更改它。例如：var x = document.getElementById("foo").style.fontSize;document.getElementById("foo").style.fontSize = x + 1;尽管这两个都可以，但此示例不起作用document.getElementById("foo").style.fontSize = "larger";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';

Answer 2

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

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

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

console.log(computedFontSize);

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

Answer 3

您从fontSize获得的值类似于“ 12px”或“ 1.5em”，因此在该字符串上加1将得到“ 12px1”或“ 1.5em1”。您可以使用字体大小并使用以下命令对其进行操作：

var fontSize = parseInt(x);

fontSize = fontSize + 1 + "px";

document.getElementById("foo").style.fontSize = fontSize;