JQuery/JavaScript: конвертировать пиксели в em простым способом

Ответ 1

Я думаю, что ваш вопрос очень важен. Поскольку классы разрешений дисплея быстро растут, использование em-позиционирования для поддержки широкого спектра разрешений экрана является действительно привлекательным подходом. Но как бы вы ни старались сохранить все в em - иногда вы получаете пиксельное значение, возможно, из перетаскивания JQuery или из другой библиотеки, и вы хотели бы преобразовать это значение в em, прежде чем отправлять его обратно на сервер для сохранения. Таким образом, в следующий раз, когда пользователь смотрит на страницу, элемент будет в правильном положении - независимо от разрешения экрана используемого устройства.

Плагины JQuery не очень страшны, если вы можете просмотреть код, особенно если они коротко и ясно, например этот плагин для преобразования значений пикселей в em как хотите. На самом деле это так коротко, что я вложу все это здесь. Для получения уведомления об авторских правах см. Ссылку.

$.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8) + 'em';
};


$.fn.toPx = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseFloat(this[0]),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(that * scopeVal) + 'px';
};

Пример использования: $(myPixelValue).toEm(); или $(myEmValue).toPx();.

Я просто тестировал это в своем приложении, он отлично работает. Поэтому я думал, что разделяю.

Ответ 2

Кажется, что выполняется так, как вам нужно, хотя оно основано на font-size родительского элемента и самого элемента, возвращаемого в px:

function px2em(elem) {
    var W = window,
        D = document;
    if (!elem || elem.parentNode.tagName.toLowerCase() == 'body') {
        return false;
    }
    else {
        var parentFontSize = parseInt(W.getComputedStyle(elem.parentNode, null).fontSize, 10),
            elemFontSize = parseInt(W.getComputedStyle(elem, null).fontSize, 10);

        var pxInEms = Math.floor((elemFontSize / parentFontSize) * 100) / 100;
        elem.style.fontSize = pxInEms + 'em';
    }
}

JS Fiddle доказательство концепции.

Примечания:

• Функция возвращает false, если элемент, который вы пытаетесь преобразовать в em, является body, хотя это потому, что я не мог понять, было ли разумным установить значение 1em или просто оставить его в покое.

• Он использует window.getComputedStyle(), поэтому он не будет работать с IE без каких-либо настроек.

Литература:

• Math.floor().
• parentNode.
• parseInt().
• tagName.
• toLowerCase().
• window.getComputedStyle().

Ответ 3

Пиксели и ems - принципиально разные типы единиц. Вы не можете просто конвертировать между ними.

Например, пользователь с размером шрифта по умолчанию размером 16 пикселей на сайте, где заголовки верхнего уровня оформлены с размером шрифта 200%, 1em может быть равным 32 пикселям. Переместите заголовок в другом месте документа, это может быть 64px или 16px. Дайте тот же документ другому пользователю, это может быть 30/60/15px. Начните разговор о другом элементе, и он может снова измениться.

Ближе всего вы можете прийти к тому, что вам нужно, это конвертировать из пикселей в ems + document + context + settings. Но если кто-то попросил вас выложить свой проект с помощью ems, они, вероятно, не будут рады, что вы пытаетесь сделать это в пикселях, а затем "конвертируете".

Ответ 4

Старый вопрос, но для справки, вот что-то, что я собрал вместе, объем и суффикс являются необязательными. Передайте ему значение rem или em как строку, например. '4em' [вы можете использовать пробелы и верхний/нижний регистр], и он вернет значение px. Если вы не дадите ему область действия, которая станет целевым элементом для поиска локального значения EM, он по умолчанию будет действовать, что дает вам значение rem. Наконец, необязательный параметр суффикса [boolean] добавит 'px' к возвращаемому значению, так что 48 станет 48px, например.

ex: emRemToPx( '3em', '#content' )

вернуть 48 на документ размером 16px/100% размером шрифта

/**
* emRemToPx.js | @whatsnewsisyphus 
* To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
* see CC0 Public Domain Dedication <http://creativecommons.org/publicdomain/zero/1.0/>.
*/
  var emRemToPx = function( value, scope, suffix ) {
    if (!scope || value.toLowerCase().indexOf("rem") >= 0) {
      scope = 'body';
    }
    if (suffix === true) {
      suffix = 'px';
    } else {
      suffix = null;
    }
    var multiplier = parseFloat(value);
    var scopeTest = $('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(scope);
    var scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(multiplier * scopeVal) + suffix;
  };

Ответ 5

Ems не равны пикселам. Это относительное измерение.

<span style="font-size: 1em;">This is 1em font size, which means the text is the same size as the parent</span>

<span style="font-size: 1.5em;">This is 1.5em font size, which means the text is 150% the size as the parent</span>

Размер базы определяется пользовательским агентом (браузером).

Ответ 6

Проверьте этот небольшой script выход: https://github.com/normanzb/size

он помогает вам преобразовывать единицы измерения, пока вы проходите в контрольном элементе dom

Ответ 7

Обычно, когда вы хотите преобразовать px в em, преобразование происходит в самом элементе. getComputedStyle возвращает значение в px, которое нарушает их отзывчивость. Код, приведенный ниже, может быть использован для устранения этой проблемы:

/**
 * Get the equivalent EM value on a given element with a given pixel value.
 *
 * Normally the number of pixel specified should come from the element itself (e.g. element.style.height) since EM is
 * relative.
 *
 * @param {Object} element - The HTML element.
 * @param {Number} pixelValue - The number of pixel to convert in EM on this specific element.
 *
 * @returns {Boolean|Number} The EM value, or false if unable to convert.
 */
window.getEmValueFromElement = function (element, pixelValue) {
    if (element.parentNode) {
        var parentFontSize = parseFloat(window.getComputedStyle(element.parentNode).fontSize);
        var elementFontSize = parseFloat(window.getComputedStyle(element).fontSize);
        var pixelValueOfOneEm = (elementFontSize / parentFontSize) * elementFontSize;
        return (pixelValue / pixelValueOfOneEm);
    }
    return false;
};

Использование его было бы так же просто, как:

var element = document.getElementById('someDiv');
var computedHeightInEm = window.getEmValueFromElement(element, element.offsetHeight);

Ответ 8

Я упаковал эту функциональность в библиотеку с проверкой типа параметра: px-to-em

С учетом этого HTML:

<p id="message" style="font-size: 16px;">Hello World!</p>

Вы можете ожидать эти выходы:

pxToEm(16, message) === 1
pxToEm(24, message) === 1.5
pxToEm(32, message) === 2

Поскольку OP запросил способ сделать это без библиотеки, я скопировал исходный код px-to-em в живую демонстрацию:

function pxToEm (px, element) {
  element = element === null || element === undefined ? document.documentElement : element;
  var temporaryElement = document.createElement('div');
  temporaryElement.style.setProperty('position', 'absolute', 'important');
  temporaryElement.style.setProperty('visibility', 'hidden', 'important');
  temporaryElement.style.setProperty('font-size', '1em', 'important');
  element.appendChild(temporaryElement);
  var baseFontSize = parseFloat(getComputedStyle(temporaryElement).fontSize);
  temporaryElement.parentNode.removeChild(temporaryElement);
  return px / baseFontSize;
}

console.log(pxToEm(16, message), 'Should be 1');
console.log(pxToEm(24, message), 'Should be 1.5');
console.log(pxToEm(32, message), 'Should be 2');

<p id="message" style="font-size: 16px;">Hello World!</p>