How To Get Font Size in HTML

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.