Existem situações em que pode ser útil obter a largura exata de pixels de umem medição. Por exemplo, suponha que você tenha um elemento com uma propriedade CSS (como borda ou preenchimento), que é medido em ems, e você precisa obter a largura exata do pixel da borda ou do preenchimento. Há uma pergunta existente que aborda este tópico:

Como posso obter o tamanho de fonte padrão em pixels usando JavaScript ou JQuery?

Esta questão está perguntando sobre como obter otamanho de fonte padrão - o que é necessário para converter um parenteem valor para um exatopx valor.

Esta resposta tem uma boa explicação de como obter o tamanho de fonte padrão de um elemento:

Como o ems mede a largura, você sempre pode calcular o tamanho exato da fonte do pixel criando uma div que é 1000 ems e dividindo sua propriedade client-Width por 1000. Eu pareço lembrar que os ems são truncados para o milésimo mais próximo, então você precisa de 1000 ems para evitar um truncamento incorreto do resultado do pixel.

Então, usando essa resposta como guia, escrevi a seguinte função para obter o tamanho de fonte padrão:

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

Depois de ter o tamanho da fonte padrão, você pode converter qualquerem largura parapx largura apenas multiplicando o ems pelo tamanho de fonte padrão do elemento e arredondando o resultado:

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

Problema: ogetDefaultFontSize Idealmente, é ideal que seja uma função simples, sem efeitos colaterais, que retorna o tamanho de fonte padrão. Mas issoFAZ tem um efeito colateral infeliz: modifica o DOM! Acrescenta um filho e, em seguida, remove o filho. Anexar o filho é necessário para obter uma validadeoffsetWidth propriedade. Se você não anexar a criançadiv para o DOM, ooffsetWidth a propriedade permanece em 0 porque o elemento nunca é renderizado. Embora removamos imediatamente o elemento filho, essa função ainda pode criar efeitos colaterais indesejados, como disparar um evento (como o Internet Explorer).onpropertychange ou W3CDOMSubtreeModified evento) que estava escutando no elemento pai.

Questão: Existe alguma maneira de escrever um verdadeiro efeito colateral livregetDefaultFontSize() função que não acidentalmente disparar manipuladores de eventos ou causar outros efeitos colaterais não intencionais?