如何获取HTML中的字体大小

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

例如：

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

唯一的问题是，它只能改变大小一旦。

来源

2013-03-04 Mark Walsh

只是抓一个元素可能无法正常工作的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';

来源

2013-03-04 05:48:05

谢谢你，这个伎俩。我是新来的，所以我看到有这样一种方法，但我没有意识到它的重要性。 – 2013-03-04 05:58:48

适用于IE> 8. http://caniuse.com/#search=getcomputedstyle – Andrew 2013-10-15 13:54:28

请注意，“显示”例如如果该元素是'block'，将返回'block'，即使父母可能有'none'也会使该元素不可见。然而，像字体大小一样，会从父母那里获得价值。 – FlorianB 2016-07-12 18:34:00

您从fontSize获得的值类似于“12px”或“1.5em”，因此将1加到该字符串将导致“12px1”或“1.5em1”。你可以把字体大小和操纵它：

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

来源

2013-03-04 05:40:47 MattDiamant

Unforunately没有工作，不过谢谢你告诉我关于 “PX” 和 “EM” 说被添加到返回值。 – 2013-03-04 05:57:35

如果您使用Jquery比下面的解决方案。

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

希望这会起作用。

来源

2013-03-04 05:48:50

如果你的元素没有font-size属性，你的代码将返回空字符串。没有必要让你的元素应该有字体大小的属性。元素可以继承父元素的属性。

在这种情况下，您需要查找计算字体大小。尝试一下（不知道IE浏览器）

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

console.log(computedFontSize);

变量computedFontSize将返回与字体大小单位。它可以是px，em，％。您需要去除单位以进行算术运算并分配新值。

来源

2013-03-04 05:53:44 kiranvj

适用于IE> 8. http://caniuse.com/#search=getcomputedstyle – Andrew 2013-10-15 13:53:40

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

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，以确定是否字体大小是由代码的任何peice的事后改变

来源

2014-08-01 11:12:54 Gaurav

如果html元素已有内联样式，您可以使用.style.fontSize获取字体大小！
当HTML元素不具有内嵌样式，你必须使用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}`); 
 
\t 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

来源

2017-02-13 21:30:55 xgqfrms

http://codepen.io/xgqfrms/full/XpwVOg/ – xgqfrms 2017-02-18 01:43:40

如何获取HTML中的字体大小

回答

相关问题