jQuery的/ JavaScript的：转换像素时间在一个简单的方法(jQuery/[remove

我正在寻找一种简单的方法来行的代码添加到我的一个插件，转换一对夫妇像素值转换为em值，因为我的项目的布局需要在EMS。 有一个简单的方法来做到这一点，因为我不希望第三方插件添加到网站上。

会不会在这里发布的代码，因为它没有任何关系插件它的自我。

谢谢。

实施例：13像素 - > ?? EM

Answer 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(); 。

我只是测试这在我的应用程序，它的伟大工程。 所以，我想我分享。

Answer 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提琴证明 。

笔记：

• 该函数返回false，如果你想转换为元件em是body ，不过那是因为我不能工作了，是否是明智的值设置为1em或者干脆不要管它。

• 它采用window.getComputedStyle()所以它不会与IE浏览器的工作，没有一些调整。

参考文献：

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

Answer 3:

像素和EMS是根本不同类型的单元的。 你不能简单地在它们之间转换。

例如，具有16像素的上，其中顶层的标题是在200％的字体大小样式的部位的默认字体大小的用户，1em的可等于32PX。 其他地方的移动标题的文件中，也可能是64像素或16像素。 给予同样的文件给不同的用户，它可为30/60/15像素。 开始谈论不同的元素，它可以再次更改。

你可以来你想要的最接近的是从像素到EMS +文档+背景+设置转换。 但是，如果有人要你来布置与EMS项目，他们可能不会高兴，你正在尝试做它的像素则“转换”。

Answer 4:

老问题，但作为参考，这里是我的东西拼凑起来，范围和后缀是可选的。 它传递一个REM或EM值作为字符串，如。 “4EM” [您可以使用空格和大写/小写]，它会返回像素值。 除非你给它一个范围，这将是寻找当地的EM值的目标元素，将默认为身体，有效地给你的REM值。 最后，可选的后缀参数[布尔]将添加“像素”将返回的值，使得48变为例如48像素。

例如： emRemToPx( '3em', '#content' )

上的字体大小16像素/ 100％文档返回48

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

Answer 5:

通常当你想转换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);

Answer 6:

我已经打包这个功能集成到一个库，完成参数类型检查： 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> 

我从得知这个答案 ，随着getComputedStyle我们可以可靠地获得小数点，提高了计算的准确性除数像素值。 我发现，通过Aras的答案可能是关闭超过0.5px，造成舍入误差我们。

Answer 7:

尝试使用这样的：

parseInt(myPixelValue) / parseFloat($("body").css("font-size"));

Answer 8:

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>

基座大小由用户代理（浏览器）来确定。

文章来源: jQuery/JavaScript: convert pixels to em in a easy way