Convertir em a px en Javascript (y obtener el tamaño de fuente predeterminado)

Hay situaciones en las que puede ser útil obtener el ancho de píxel exacto de unem medición. Por ejemplo, suponga que tiene un elemento con una propiedad CSS (como borde o relleno) que se mide en ems, y necesita obtener el ancho de píxel exacto del borde o relleno. Hay una pregunta existente que toca este tema:

¿Cómo puedo obtener el tamaño de fuente predeterminado en píxeles mediante JavaScript o JQuery?

Esta pregunta es acerca de cómo obtener eltamaño de fuente predeterminado - Lo que es necesario para convertir un familiar.em valor a un exactopx valor.

Esta respuesta tiene una buena explicación de cómo obtener el tamaño de fuente predeterminado de un elemento:

Ya que ems mide el ancho, siempre puede calcular el tamaño exacto de la fuente en píxeles creando un div que tenga 1000 ems de largo y dividiendo su propiedad de ancho de cliente por 1000. Recuerdo que los ems están truncados a la milésima más cercana, por lo que necesita 1000 ems para Evitar un truncamiento erróneo del resultado del píxel.

Entonces, usando esta respuesta como guía, escribí la siguiente función para obtener el tamaño de fuente predeterminado:

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

Una vez que tenga el tamaño de fuente predeterminado, puede convertir cualquierem ancho apx ancho simplemente multiplicando el ems por el tamaño de fuente predeterminado del elemento y redondeando el resultado:

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

Problema: losgetDefaultFontSize idealmente se supone que es una función simple, sin efectos secundarios, que devuelve el tamaño de fuente predeterminado. PeroHACE tener un efecto secundario desafortunado: modifica el DOM! Agrega un niño y luego lo quita. Anexar al niño es necesario para obtener un certificado válido.offsetWidth propiedad. Si no le agregas al niño.div al DOM, eloffsetWidth la propiedad permanece en 0 porque el elemento nunca se representa. Aunque eliminamos de inmediato el elemento secundario, esta función puede crear efectos secundarios no deseados, como disparar un evento (como el Explorador de Internet).onpropertychange o W3C'sDOMSubtreeModified evento) que estaba escuchando en el elemento padre.

Pregunta: ¿Hay alguna manera de escribir un verdadero efecto secundario libregetDefaultFontSize() ¿Una función que no dispare accidentalmente a los manejadores de eventos o cause otros efectos secundarios involuntarios?

Respuestas a la pregunta(4)

Su respuesta a la pregunta