jQuery/JavaScript：以简单的方式将像素转换为em

Question

我在寻找一种简单的方法将一行代码添加到我的插件中，将几个像素值转换为em值，因为我的布局项目需要在ems中。有没有简单的方法来做到这一点，因为我不想向该网站添加第三方插件。

不会在这里发布代码，因为它与插件本身无关。

谢谢。

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

Answer 1

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

例如，在200％字体大小1em的顶级标题样式的网站上，默认字体大小为16px的用户可能等于32px。将标题移动到文档的其他位置，可以是64px或16px。将相同的文档提供给不同的用户，可能是30/60/15px。开始谈论一个不同的元素，它可以再次改变。

最接近你想要的是将像素转换为ems +文档+上下文+设置。但是如果有人要求你用ems布局你的项目，他们可能不会高兴你试图以像素为单位进行“转换”。

Answer 2

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> 

基本大小由用户代理（浏览器）决定。

Answer 3

下似乎你需要做的，虽然它是基于母公司的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 proof of concept。

注：

• 函数返回false，如果你想转换为em的元素是body，不过那是因为我不能出它是否是明智的设定值工作到1em或干脆离开它。

• 它使用window.getComputedStyle()，所以它不会使用IE，没有一些调整。

参考文献：

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

Answer 4

我认为你的问题非常重要。由于显示分辨率的类别正在迅速增加，所以使用电子定位来支持各种屏幕分辨率是一种非常有吸引力的方法。但是，无论你如何努力将所有内容都保存在em中 - 有时候你可能会从JQuery拖放或从其他库中获得像素值，并且在将其发送回服务器以实现持久性之前，您需要将此值转换为em。这样下次用户查看页面时，项目将处于正确的位置 - 无论他们正在使用的设备的屏幕分辨率如何。

当你可以查看代码时，JQuery插件并不是非常可怕，特别是如果它们像你想要的那样简短和甜美如this plugin to convert pixel values to 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 5

老问题，但作为参考，这里是我拼凑在一起的东西，范围和后缀是可选的。将它作为字符串传递给REM或EM值，例如。 '4em'[你可以使用空格和大写/小写]，它会返回px值。除非你给它一个范围，这是寻找本地EM值的目标元素，否则它将默认为正文，有效地给你rem值。最后，可选的后缀参数[boolean]将为返回值添加'px'，例如48变为48px。

例如： https://github.com/normanzb/size

它可以帮助你转换的单位，只要：emRemToPx('3em', '#content')

上的字体大小16像素/ 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; 
    }; 

Answer 6

检查这个小脚本了回报48当你通过一个参考dom元素

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

Answer 8

我包装这个功能集成到一个库，完成参数类型检查： px-to-em

鉴于这种HTML：

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

你可以指望这些OUTP UTS：

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>

我从this answer得知，用getComputedStyle我们可以可靠地得到带小数点的除数px值，提高了计算的准确性。我发现Aras的答案可能会超过0.5px，这对我们造成了四舍五入的错误。