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

2021/01/31 12:51 · jquery ·  · 0评论

我正在寻找一种简单的方法来向我的插件添加一行代码,以将几个像素值转换为em值,因为我的项目的布局需要在ems中。有没有一种简单的方法可以执行此操作,因为我不想向该站点添加第三方插件。

不会在此处发布代码,因为它与自己的插件无关。

谢谢。

例如:13px-> ?? em

我认为您的问题非常重要。由于显示分辨率的类别正在迅速增加,因此使用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();

我刚刚在我的应用程序中对此进行了测试,效果很好。所以我想我分享。

以下内容似乎可以按您的要求执行,尽管它基于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,如果你想转换的元素embody,虽然那是因为我不能工作了,是否是明智的值设置为1em或者干脆息事宁人。

  • 它使用window.getComputedStyle(),因此如果不进行一些调整,它将无法与IE一起使用。

参考文献:

像素和em基本上是不同类型的单位。您不能简单地在它们之间进行转换。

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

最接近您想要的是将像素转换为ems + document + context + settings。但是,如果有人要求您使用ems布置您的项目,那么他们可能会不满意您尝试以像素为单位然后进行“转换”。

旧问题,但仅供参考,这是我凑齐的内容,范围和后缀是可选的。将rem或em值作为字符串传递给它,例如。'4em'[您可以使用空格和大写/小写],它将返回px值。除非给它一个范围(它将成为查找本地EM值的目标元素),否则它将默认为body,有效地为您提供rem值。最后,可选的后缀参数[boolean]将'px'添加到返回值,例如48变为48px。

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

在字体大小为16px / 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;
  };

通常,当你要转换pxem,发生转换元素本身。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);

我将此功能打包到一个库中,并完成了参数类型检查: 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我们可以可靠地获得带小数点的除数px值,从而提高了计算的准确性。我发现Aras的答案可能相差0.5像素以上,这对我们造成了舍入错误。

尝试使用此:

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

无论如何,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>

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

本文地址:http://jquery.askforanswer.com/jquery-javascriptyijiandandefangshijiangxiangsuzhuanhuanweiem.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!