jquery 如何转换像素em在一个简单的方法

xcitsw88  于 2023-05-17  发布在  jQuery
关注(0)|答案(9)|浏览(207)

我正在寻找一个简单的方法来添加一行代码到我的插件,转换成em值的像素值夫妇,因为我的项目布局需要在ems。有没有一个简单的方法来做到这一点,因为我不想添加一个第三方插件的网站。
不会在这里发布代码,因为它与插件本身无关。
例如:13 px->??em

5cg8jx4n

5cg8jx4n1#

我认为你的问题很重要。由于显示器分辨率的类别正在迅速增加,使用em定位来支持宽范围的屏幕分辨率是一种非常有吸引力的方法。但是,无论你多么努力地将所有内容都保存在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();
我刚刚在我的应用程序中测试了这个,它工作得很好。所以我想我分享。

tag5nh1u

tag5nh1u2#

下面的代码似乎可以按照您的要求执行,尽管它是基于父元素和元素本身的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
备注:

  • 如果您试图转换为em的元素是body,则该函数返回false,尽管这是因为我无法确定将值设置为1em或简单地保持原样是否明智。
  • 它使用window.getComputedStyle(),所以如果不做一些调整,它将无法与IE一起工作。

参考文献:

hs1ihplo

hs1ihplo3#

像素和ems是根本不同类型的单位。你不能简单地在它们之间转换。
例如,在顶级标题以200%字体大小样式化的站点上,默认字体大小为16 px的用户,1 em可能等于32 px。将标题移动到文档中的其他位置,它可以是64 px或16 px。将相同的文档交给不同的用户,它可能是30/60/15 px。开始谈论一个不同的元素,它可以再次改变。
最接近你想要的是从像素转换到ems+文档+上下文+设置。但是如果有人让你用ems来布置你的项目,他们可能会不高兴你试图用像素来做,然后“转换”。

nsc4cvqm

nsc4cvqm4#

通常,当你想将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);
atmip9wb

atmip9wb5#

老问题,但作为参考,这里是我拼凑起来的东西,范围和后缀是可选的。传递一个rem或em值作为字符串,例如。'4 em' [您可以使用空格和大写/小写],它将返回px值。除非您给予它一个作用域(这将是查找本地EM值的目标元素),否则它将默认为body,从而有效地为您提供rem值。最后,可选的suffix参数[ boolean ]会将'px'添加到返回值中,例如48变成48 px。
例如:emRemToPx( '3em', '#content' )
在字体大小为16 px/ 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;
  };
dgtucam1

dgtucam16#

我已经将此功能打包到一个库中,并完成了参数类型检查: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>

我从this answer了解到,使用getComputedStyle我们可以可靠地获得带小数点的除数px值,这提高了计算的准确性。我发现Aras的答案可能会偏离0.5px以上,这给我们带来了舍入误差。

emeijp43

emeijp437#

请尝试使用此:

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

5q4ezhmt8#

function pixelToEm(pixel) {
   var em = pixel / 16;
   return em;
}
czq61nw1

czq61nw19#

反正EM不等于像素。这是一个相对的衡量标准。

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

基本大小由用户代理(浏览器)确定。

相关问题