Преобразование em в px в Javascript (и получение размера шрифта по умолчанию)

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

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

Этот вопрос задает вопрос о получении размера шрифта по умолчанию, который необходим для преобразования относительного значения em в точное значение px.

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

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

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

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

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

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

Проблема: getDefaultFontSize идеально подходит как простая, свободная от побочных эффектов функция, которая возвращает размер шрифта по умолчанию. Но у этого есть неудачный побочный эффект: он изменяет DOM! Он добавляет ребенка, а затем удаляет его. Добавление ребенка необходимо для получения действительного свойства offsetWidth. Если вы не добавляете дочерний элемент div в DOM, свойство offsetWidth остается равным 0, потому что элемент никогда не отображается. Несмотря на то, что мы сразу удаляем дочерний элемент, эта функция может по-прежнему создавать непреднамеренные побочные эффекты, такие как запуск события (например, событие Internet Explorer onpropertychange или событие W3C DOMSubtreeModified), которое прослушивалось на родительском элементе.

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

Ответ 1

Изменить: Нет, нет.

Чтобы получить размер шрифта рендеринга данного элемента, не влияя на DOM:

parseFloat(getComputedStyle(parentElement).fontSize);

Это основано на ответе на этот вопрос.

Edit:

В IE вам нужно будет использовать parentElement.currentStyle["fontSize"], но это не гарантирует конвертацию размера в px. Так что.

Кроме того, этот фрагмент не получит размер шрифта по умолчанию для элемента, а скорее его фактический размер шрифта, что важно, если он действительно получил класс и стиль, связанные с ним. Другими словами, если размер шрифта элемента 2em, вы получите количество пикселей в 2 ems. Если размер шрифта не указан в строке, вы не сможете получить коэффициент конверсии.

Ответ 2

У меня есть лучший ответ. Мой код сохранит значение 1em в единицах-px в переменной em.

Поместите этот div в любом месте вашего HTML-кода

<div id="div" style="height:0;width:0;outline:none;border:none;padding:none;margin:none;"></div>

Поместите эту функцию в свой файл JavaScript

var em;
function getValue(id){
    var div = document.getElementById(id);
    div.style.height = 1em;
    em = div.offsetHeight;
}

Теперь, когда вы вызовете эту функцию 'getValue' с идентификатором этого параметра test div в параметре, вы получите имя переменной em, которое будет содержать значение 1 em в px.

Ответ 3

Если вам нужно что-то быстрое и грязное (и на основе базового размера шрифта тела, а не элемента), я бы пошел с:

Number(getComputedStyle(document.body,null).fontSize.replace(/[^\d]/g, ''))

 Number(  // Casts numeric strings to number
   getComputedStyle(  // takes element and returns CSSStyleDeclaration object
     document.body,null) // use document.body to get first "styled" element
         .fontSize  // get fontSize property
          .replace(/[^\d]/g, '')  // simple regex that will strip out non-numbers
 ) // returns number