How To Get Font Size in HTML

Question

I was reading a question on here trying to get the font size of a text. The answer they gave was to get the pixel size using a measure method. All i want to be able to do is get the font size value so i can change it.

For example:

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

This example does not work though these two do

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

The only problem is that it only changes the size once.

Solution 1

Just grabbing the style.fontSize of an element may not work. If the font-size is defined by a stylesheet, this will report "" (empty string).

You should use 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';

Solution 2

If your element don't have font-size property your code will return empty string. Its not necessary that your element should have font-size property. The element can inherit the properties from parent elements.

In this case you need to find the computed font-size. Try this (not sure about IE)

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

console.log(computedFontSize);

The variable computedFontSize will return with the font size with unit. Unit can be px, em, %. You need to strip out the unit to do an arithmetic operation and assign the new value.

Solution 3

If you are using Jquery than following is the solution.

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

Hope this will work.

Solution 4

The value that you are getting from fontSize is something like "12px" or "1.5em", so adding 1 to that string will result in "12px1" or "1.5em1". You can take the font size and manipulate it with:

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

Solution 5

1. if the html element has inline style, you can using the .style.fontSize to get the font-size!
2. when the html element doesn't has inline style, you have to using the Window.getComputedStyle() function to get the font-size!

here is my demo codes!

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>

reference links:

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

View more solutions

Comments

[Mark Walsh]

Unforunately that did not work, though thank you for telling me about the "px" and "em" that is added to the return value.

[FlorianB]

Note that 'display' e.g. will return 'block' if that element is 'block' even though a parent may have 'none' which makes this element invisible. Something like font-size however, will take the value from parents.

[Puspam]

parseInt(string value) did the trick. It basically trims the string part in the value, such as the px, em, etc. With this, not much manipulation is required if you know that only a certain unit will be used for the size.