如何在HTML中获取字体大小

Question

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

例如：

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

您应该使用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属性，则代码将返回空字符串。您的元素不必具有font-size属性。该元素可以从父元素继承属性。

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

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

console.log(computedFontSize);

变量computedFontSize将以字体大小单位返回。它可以是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，则以下是解决方案。

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来确定之后是否通过任何代码更改fontsize

Answer 6

1. 如果 html元素具有内联样式，则可以使用.style.fontSize获取 font-size ！
2. 当 html元素没有内联样式时，您必须使用Window.getComputedStyle()函数来获取字体大小 <！/ LI>

   这是我的演示代码！

   ＆＃13;

   ＆＃13;

   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();

   ＆＃13;

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

   ＆＃13;

   ＆＃13;
   ＆＃13;

   参考链接：

   https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle