There are situations where it can be useful to get the exact pixel width of an
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.
parentElement = parentElement || document.body;
var div = document.createElement('div');
div.style.width = "1000em";
var pixels = div.offsetWidth / 1000;
Math.round(ems * getDefaultFontSize(element.parentNode))
Edit: No, there isn't.
To get the rendered font size of a given element, without affecting the DOM:
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.