Мобильная версияПреобразование em в px в Javascript (и получение размера шрифта по умолчанию) ⇐ Javascript
-
Гость
Преобразование em в px в Javascript (и получение размера шрифта по умолчанию)
В некоторых ситуациях может оказаться полезным получить точную ширину в пикселях измерения em. Например, предположим, что у вас есть элемент со свойством CSS (например, границей или отступом), измеряемым в em, и вам нужно получить точную ширину границы или отступа в пикселях. Уже существует вопрос, затрагивающий эту тему:
Как получить размер шрифта по умолчанию в пикселях с помощью JavaScript или JQuery?
Этот вопрос касается получения размера шрифта по умолчанию, который необходим для преобразования относительного значения em в точное px ценить.
В этом ответе содержится довольно хорошее объяснение того, как получить размер шрифта элемента по умолчанию:
Поскольку ems измеряет ширину, вы всегда можете вычислить точный размер шрифта в пикселях. размер, создав div длиной 1000 em и разделив его client-Width на 1000. Кажется, я помню, что em усекаются до с точностью до тысячной, поэтому нужно 1000 ems, чтобы избежать ошибочного усечение результата пикселя.
Итак, используя этот ответ в качестве руководства, я написал следующую функцию, чтобы получить размер шрифта по умолчанию:
функция getDefaultFontSize(parentElement) { родительскийЭлемент = родительскийЭлемент || документ.тело; вар div = document.createElement('div'); div.style.width = "1000em"; родительскийЭлемент.appendChild(div); var пикселей = div.offsetWidth/1000; родительскийЭлемент.removeChild(div); возврат пикселей; } После того как у вас есть размер шрифта по умолчанию, вы можете преобразовать любую ширину em в ширину px, просто умножив ems на размер шрифта элемента по умолчанию и округлив результат:
Math.round(ems * getDefaultFontSize(element.parentNode))
Проблема: В идеале getDefaultFontSize должна быть простой функцией без побочных эффектов, возвращающей размер шрифта по умолчанию. Но у него ДЕЙСТВИТЕЛЬНО есть неприятный побочный эффект: он изменяет DOM! Он добавляет дочерний элемент, а затем удаляет его. Добавление дочернего элемента необходимо для получения допустимого свойства offsetWidth. Если вы не добавите дочерний элемент div в DOM, свойство offsetWidth останется равным 0, поскольку элемент никогда не отображается. Несмотря на то, что мы немедленно удаляем дочерний элемент, эта функция все равно может создавать непредвиденные побочные эффекты, такие как запуск события (например, onpropertychange в Internet Explorer или события DOMSubtreeModified в W3C), которое прослушивало на родительском элементе.
Вопрос: Есть ли способ написать действительно свободную от побочных эффектов функцию getDefaultFontSize(), которая не будет случайно запускать обработчики событий или вызывать другие непредвиденные побочные эффекты?
В некоторых ситуациях может оказаться полезным получить точную ширину в пикселях измерения em. Например, предположим, что у вас есть элемент со свойством CSS (например, границей или отступом), измеряемым в em, и вам нужно получить точную ширину границы или отступа в пикселях. Уже существует вопрос, затрагивающий эту тему:
Как получить размер шрифта по умолчанию в пикселях с помощью JavaScript или JQuery?
Этот вопрос касается получения размера шрифта по умолчанию, который необходим для преобразования относительного значения em в точное px ценить.
В этом ответе содержится довольно хорошее объяснение того, как получить размер шрифта элемента по умолчанию:
Поскольку ems измеряет ширину, вы всегда можете вычислить точный размер шрифта в пикселях. размер, создав div длиной 1000 em и разделив его client-Width на 1000. Кажется, я помню, что em усекаются до с точностью до тысячной, поэтому нужно 1000 ems, чтобы избежать ошибочного усечение результата пикселя.
Итак, используя этот ответ в качестве руководства, я написал следующую функцию, чтобы получить размер шрифта по умолчанию:
функция getDefaultFontSize(parentElement) { родительскийЭлемент = родительскийЭлемент || документ.тело; вар div = document.createElement('div'); div.style.width = "1000em"; родительскийЭлемент.appendChild(div); var пикселей = div.offsetWidth/1000; родительскийЭлемент.removeChild(div); возврат пикселей; } После того как у вас есть размер шрифта по умолчанию, вы можете преобразовать любую ширину em в ширину px, просто умножив ems на размер шрифта элемента по умолчанию и округлив результат:
Math.round(ems * getDefaultFontSize(element.parentNode))
Проблема: В идеале getDefaultFontSize должна быть простой функцией без побочных эффектов, возвращающей размер шрифта по умолчанию. Но у него ДЕЙСТВИТЕЛЬНО есть неприятный побочный эффект: он изменяет DOM! Он добавляет дочерний элемент, а затем удаляет его. Добавление дочернего элемента необходимо для получения допустимого свойства offsetWidth. Если вы не добавите дочерний элемент div в DOM, свойство offsetWidth останется равным 0, поскольку элемент никогда не отображается. Несмотря на то, что мы немедленно удаляем дочерний элемент, эта функция все равно может создавать непредвиденные побочные эффекты, такие как запуск события (например, onpropertychange в Internet Explorer или события DOMSubtreeModified в W3C), которое прослушивало на родительском элементе.
Вопрос: Есть ли способ написать действительно свободную от побочных эффектов функцию getDefaultFontSize(), которая не будет случайно запускать обработчики событий или вызывать другие непредвиденные побочные эффекты?
