我正在阅读这里的一个问题，试图获取文本的字体大小。他们给出的答案是使用测量方法获得像素大小。我想要做的就是获取字体大小值，以便我可以更改它。
例如：
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";唯一的问题是它只更改一次大小。
仅获取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';
如果您的元素没有 font-size 属性，您的代码将返回空字符串。您的元素不必具有 font-size 属性。元素可以继承父元素的属性。
在这种情况下，您需要找到计算出的字体大小。试试这个（不确定IE）
var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize;
console.log(computedFontSize);
变量calculatedFontSize 将返回带有单位的字体大小。单位可以是 px、em、%。您需要剥离该单元以进行算术运算并分配新值。
如果您使用的是 Jquery，那么以下是解决方案。
var fontSize = $("#foo").css("fontSize");
fontSize = parseInt(fontSize) + 1 + "px";
$("#foo").css("fontSize", fontSize );
希望这会奏效。
您从 fontSize 获得的值类似于“12px”或“1.5em”，因此向该字符串添加 1 将导致“12px1”或“1.5em1”。您可以使用字体大小并使用以下方法对其进行操作：
var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
.style.fontSize来获取字体大小！Window.getComputedStyle()函数来获取字体大小！这是我的演示代码！
function tureFunc() {
alert(document.getElementById("fp").style.fontSize);
console.log(`fontSize = ${document.getElementById("fp").style.fontSize}`);
}
function falseFunc() {
alert( false ? document.getElementById("fh").style.fontSize : "check the consloe!");
console.log(`fontSize = ${document.getElementById("fh").style.fontSize}`);
}
function getTheStyle(){
let elem = document.getElementById("elem-container");
let fontSize = window.getComputedStyle(elem,null).getPropertyValue("font-size");
// font-size !=== fontSize
console.log(`fontSize = ${fontSize}`);
alert(fontSize);
document.getElementById("output").innerHTML = fontSize;
}
// getTheStyle();<p id="fp" style="font-size:120%">
This is a paragraph.
<mark>inline style : <code>style="font-size:120%"</code></mark>
</p>
<button type="button" onclick="tureFunc()">Return fontSize</button>
<h3 id="fh">
This is a H3. <mark>browser defualt value</mark>
</h3>
<button type="button" onclick="falseFunc()">Not Return fontSize</button>
<div id="elem-container">
<mark>window.getComputedStyle & .getPropertyValue("font-size");</mark><br/>
<button type="button" onclick="getTheStyle()">Return font-size</button>
</div>
<div id="output"></div>参考链接：
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle