如何获取HTML中的字体大小

我在这里读一个问题，试图获取文本的字体大小。 他们给出的答案是使用度量方法获得像素大小。 所有我想能够做的就是获得字体大小的值，所以我可以改变它。

例如：

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是由样式表定义的，则会报告"" （空string）。

你应该使用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属性，你的代码将返回空string。 它没有必要你的元素应该有font-size属性。 该元素可以inheritance父元素的属性。

在这种情况下，你需要find计算的字体大小。 试试这个（不知道有关IE）

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

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

Answer 3

你从fontSize得到的值就是“12px”或“1.5em”，所以加1就会导致“12px1”或“1.5em1”。 您可以采取字体大小和操作：

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

Answer 4

如果你正在使用Jquery比以下是解决scheme。

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

希望这会工作。

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

我们可以进一步使用getter和setter来确定字体大小是否随后被任何代码所改变

Answer 6

1. 如果html元素具有内联样式 ，则可以使用.style.fontSize来获取字体大小 ！
2. 当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}`); 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>