Существуют ситуации, когда бывает полезно получить точную ширину пикселяem измерение. Например, предположим, что у вас есть элемент со свойством CSS (например, border или padding), который измеряется в ems, и вам нужно получить точную ширину пикселя границы или отступа. Существует существующий вопрос, который затрагивает эту тему:

Как я могу получить размер шрифта по умолчанию в пикселях, используя JavaScript или JQuery?

Этот вопрос задает вопрос о получении размер шрифта по умолчанию - что необходимо для преобразования относительногоem значение до точногоpx ценность

Этот ответ @ есть довольно хорошее объяснение того, как получить размер шрифта элемента по умолчанию:

Так как ems измеряет ширину, вы всегда можете вычислить точный размер шрифта в пикселях, создав div, длина которого составляет 1000 ems, и разделив его свойство client-Width на 1000. Я помню, что ems усекаются до ближайшей тысячной, поэтому вам нужно 1000 ems чтобы избежать ошибочного усечения результата пикселя.

Итак, используя этот ответ в качестве руководства, я написал следующую функцию, чтобы получить размер шрифта по умолчанию:

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

Как только у вас есть размер шрифта по умолчанию, вы можете конвертировать любойem ширина доpx width, просто умножив ems на размер шрифта элемента по умолчанию и округлив результат:

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

Problem: ThegetDefaultFontSize идеале @ должна быть простой функцией без побочных эффектов, которая возвращает размер шрифта по умолчанию. Но это ДЕЛАЕТ имеет неприятный побочный эффект: он изменяет DOM! Он добавляет ребенка, а затем удаляет ребенка. Присоединение ребенка необходимо для того, чтобы получить действительныйoffsetWidth свойство. Если вы не добавите ребенкаdiv для DOM,offsetWidthвойство @ остается в 0, потому что элемент никогда не отображается. Несмотря на то, что мы немедленно удаляем дочерний элемент, эта функция может создавать непреднамеренные побочные эффекты, такие как запуск события (например, Internet Exploreronpropertychange или W3C'sDOMSubtreeModified event), который прослушивал родительский элемент.

Вопрос Есть ли способ написать действительно побочный эффект бесплатноgetDefaultFontSize() функция, которая не будет запускать обработчики событий случайно или вызывать другие непреднамеренные побочные эффекты?