74

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.

David Foerster
  • 1,429
  • 1
  • 13
  • 22
Mark Walsh
  • 915
  • 1
  • 7
  • 12

7 Answers7

198

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';
Paul Armstrong
  • 6,678
  • 1
  • 20
  • 34
  • 2
    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. – FlorianB Jul 12 '16 at 18:34
18

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.

kiranvj
  • 27,729
  • 5
  • 65
  • 72
4

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.

Umair Saleem
  • 1,005
  • 5
  • 19
2

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;
MattDiamant
  • 8,010
  • 4
  • 35
  • 45
  • Unforunately that did not work, though thank you for telling me about the "px" and "em" that is added to the return value. – Mark Walsh Mar 04 '13 at 05:57
  • `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. – Puspam Dec 01 '20 at 14:54
2
  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

xgqfrms
  • 7,269
  • 1
  • 50
  • 53
1

Making it work for every case

Sometimes (when using media queries for instance) the above answers don't work, here is how to achieve it anyway:

const fontSize = window.getComputedStyle(el).fontSize
Alexandre Daubricourt
  • 2,371
  • 1
  • 23
  • 27
0

Try this it would definately help you in determining the font size

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

we can further use getter and setter to determine if fontsize is changed afterwards by any peice of code

Gaurav
  • 813
  • 9
  • 11