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

Answer 2

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

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

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

console.log(computedFontSize);

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

Answer 3

使其适用于每种情况

有时（例如使用媒体查询时）上述答案不起作用，以下是如何实现它：

const fontSize = window.getComputedStyle(el).fontSize

Answer 4

如果您使用 Jquery，则解决方案如下。

var fontSize = $("#foo").css("fontSize");
fontSize  = parseInt(fontSize) + 1 + "px";
$("#foo").css("fontSize", fontSize );

希望这会起作用。