Channel72 Channel72 - 5 months ago 8x
Javascript Question

Converting em to px in Javascript (and getting default font size)

There are situations where it can be useful to get the exact pixel width of an

measurement. For example, suppose you have an element with a CSS property (like border or padding) which is measured in ems, and you need to get the exact pixel width of the border or padding. There's an existing question which touches on this topic:

How can i get default font size in pixels by using JavaScript or JQuery?

This question is asking about getting the default font size - which is necessary in order to convert a relative
value to an exact

This answer has a pretty good explanation of how to go about getting the default font size of an element:

Since ems measure width you can always compute the exact pixel font
size by creating a div that is 1000 ems long and dividing its
client-Width property by 1000. I seem to recall ems are truncated to
the nearest thousandth, so you need 1000 ems to avoid an erroneous
truncation of the pixel result.

So, using this answer as a guide, I wrote the following function to get the default font size:

function getDefaultFontSize(parentElement)
parentElement = parentElement || document.body;
var div = document.createElement('div'); = "1000em";
var pixels = div.offsetWidth / 1000;
return pixels;

Once you have the default font size, you can convert any
width to
width by just multiplying the ems by the element's default font size and rounding the result:

Math.round(ems * getDefaultFontSize(element.parentNode))

Problem: The
is ideally supposed to be a simple, side-effect free function that returns the default font size. But it DOES have an unfortunate side effect: it modifies the DOM! It appends a child and then removes the child. Appending the child is necessary in order to get a valid
property. If you don't append the child
to the DOM, the
property remains at 0 because the element is never rendered. Even though we immediately remove the child element, this function can still create unintended side effects, such as firing an event (like Internet Explorer's
or W3C's
event) that was listening on the parent element.

Question: Is there any way to write a truly side-effect free
function that won't accidentally fire event handlers or cause other unintended side effects?


Edit: No, there isn't.

To get the rendered font size of a given element, without affecting the DOM:

Number(getComputedStyle(parentElement, "").fontSize.match(/(\d*(\.\d*)?)px/)[1]);

This is based off the answer to this question. I expanded the regex to allow for floating point values.


In IE, you would have to use parentElement.currentStyle["fontSize"], but this is not guaranteed to convert the size to px. So that's out.

Furthermore, this snippet won't get you the default font size of the element, but rather its actual font size, which is important if it has actually got a class and a style associated with it. In other words, if the element's font size is 2em, you'll get the number of pixels in 2 ems. Unless the font size is specified inline, you won't be able to get the conversion ratio right.