如何在 HTML 中获取字体大小

Posted 2023-03-06

【中文标题】如何在 HTML 中获取字体大小

【英文标题】：How To Get Font Size in HTML

【发布时间】：2013-02-18 03:59:34

【问题描述】：

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

例如：

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

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

【参考方案1】：

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

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

【讨论】：

很遗憾，这不起作用，但感谢您告诉我添加到返回值的“px”和“em”。

parseInt(string value) 成功了。它基本上是修剪值中的字符串部分，例如px、em等。这样，如果您知道大小只会使用某个单位，则不需要太多操作。

【参考方案2】：

仅仅抓住元素的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 这样的东西会从父母那里获取价值。

【参考方案3】：

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

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

希望这会奏效。

【参考方案4】：

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

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

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

console.log(computedFontSize);

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

【参考方案5】：

试试这个，它肯定会帮助你确定字体大小

var elem = document.createElement('div');
var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)
document.body.removeChild(elem);

function getStyle(elem,prop)
if (elem.currentStyle) 
var res= elem.currentStyle.margin;
 else if (window.getComputedStyle) 
if (window.getComputedStyle.getPropertyValue)
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)
elsevar res =window.getComputedStyle(elem)[prop] ;

return res;

我们可以进一步使用 getter 和 setter 来确定 fontsize 是否会被任何代码改变

【参考方案6】：

如果html元素有内联样式，你可以使用.style.fontSize获取font-size！ 当html元素没有内联样式时，你必须使用Window.getComputedStyle()函数来获取font-size ！

这是我的演示代码！

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

【参考方案7】：

使其适用于每种情况

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

const fontSize = window.getComputedStyle(el).fontSize