javascript-如何获取HTML的字体大小

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

例如:

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

尽管这两个都可以,但此示例不起作用

  1. document.getElementById("foo").style.fontSize = "smaller";
  2. document.getElementById("foo").style.fontSize = "smaller";

唯一的问题是它仅更改一次大小。

Mark Walsh asked 2020-02-14T04:36:52Z
6个解决方案
132 votes

仅获取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';
Paul Armstrong answered 2020-02-14T04:50:37Z
8 votes

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

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

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

console.log(computedFontSize);

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

kiranvj answered 2020-02-14T04:51:07Z
2 votes

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

var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
MattDiamant answered 2020-02-14T04:51:28Z
2 votes

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

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

希望这会起作用。

Umair Saleem answered 2020-02-14T04:51:52Z
0 votes

试试这个绝对可以帮助您确定字体大小

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)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}

我们可以进一步使用getter和setter来确定之后是否通过任何代码来更改字体大小

Gaurav answered 2020-02-14T04:52:17Z
0 votes
  1. 如果html元素具有内联样式,则可以使用<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>获得字体大小!
  2. 当html元素没有内联样式时,您必须使用<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>函数来获取字体大小!

这是我的演示代码!

<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>
<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/zh-CN/docs/Web/API/Window/getComputedStyle]

xgqfrms answered 2020-02-14T04:53:59Z
translate from https://stackoverflow.com:/questions/15195209/how-to-get-font-size-in-html