javascript - Javascript - 在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";

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

时间:

只抓取元素的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属性,代码会返回空字符串,你的元素没有font-size属性是必要的,元素可以从父元素继承属性。

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


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



console.log(computedFontSize);



变量computedFontSize会返回字体大小单位,可以是px em %,你需要去掉这个单元来做一个算术运算,并且分配新的值。

你从fontSize获得的值类似于"12px "或"1.5em ",因此在该字符串中添加1将导致"12px1 "或"1.5em1 "。你可以使用字体大小,并且使用以下操作操作它:


var fontSize = parseInt(x);


fontSize = fontSize + 1 +"px";


document.getElementById("foo").style.fontSize = fontSize;



如果你使用Jquery,以下是解决方案。


var fontSize = $("#foo").css("fontSize");


fontSize = parseInt(fontSize) + 1 +"px";


$("#foo").css("fontSize", fontSize );



希望这会工作。

试试这个可以帮助你确定字体大小


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之后,是否会被任何代码修改。

  • 如果html元素有inline样式,则可以使用.style.fontSize获取font-size!
  • 当html元素没有inline样式时,你必须使用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

...