title: Converting em to px in Javascript (and getting default font size)
body: <p>There are situations where it can be useful to get the exact pixel width of an <code>em</code> 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:</p>
  
  <p><a href="https://stackoverflow.com/questions/1442542/how-can-i-get-default-font-size-in-pixels-by-using-javascript-or-jquery">How can i get default font size in pixels by using JavaScript or JQuery?</a></p>
  
  <p>This question is asking about getting the <em>default font size</em> - which is necessary in order to convert a relative <code>em</code> value to an exact <code>px</code> value.  </p>
  
  <p><a href="https://stackoverflow.com/a/4530334/168288">This answer</a> has a pretty good explanation of how to go about getting the default font size of an element:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>So, using this answer as a guide, I wrote the following function to get the default font size:</p>
  
  <pre><code>function getDefaultFontSize(parentElement)
  {
      parentElement = parentElement || document.body;
      var div = document.createElement('div');
      div.style.width = "1000em";
      parentElement.appendChild(div);
      var pixels = div.offsetWidth / 1000;
      parentElement.removeChild(div);
      return pixels;
  }
  </code></pre>
  
  <p>Once you have the default font size, you can convert any <code>em</code> width to <code>px</code> width by just multiplying the ems by the element's default font size and rounding the result:</p>
  
  <p><code>Math.round(ems * getDefaultFontSize(element.parentNode))</code></p>
  
  <p><strong>Problem:</strong> The <code>getDefaultFontSize</code> is ideally supposed to be a simple, side-effect free function that returns the default font size.  But it <em>DOES</em> 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 <code>offsetWidth</code> property.  If you don't append the child <code>div</code> to the DOM, the <code>offsetWidth</code> 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 <code>onpropertychange</code> or W3C's <code>DOMSubtreeModified</code> event) that was listening on the parent element. </p>
  
  <p><strong>Question:</strong> Is there any way to write a truly side-effect free <code>getDefaultFontSize()</code> function that won't accidentally fire event handlers or cause other unintended side effects?</p>