在Javascript中将em转换为px（并获得默认字体大小） [英] Converting em to px in Javascript (and getting default font size)

问题描述

有些情况可以获得 em 测量的精确像素宽度。例如，假设您有一个具有CSS属性（如边框或填充）的元素，它以ems为单位，您需要获得边框或填充的确切像素宽度。现在有一个问题涉及到这个主题：

There are situations where it can be useful to get the exact pixel width of an em measurement. For example, suppose you have an element with a CSS property (like border or padding) which is measured in ems, and you need to get the exact pixel width of the border or padding. There's an existing question which touches on this topic:

如何使用JavaScript或JQuery获取默认字体大小（像素）？

这个问题是关于获取默认字体大小 - 这是必要的，以便将相对的 em 值转换为一个确切的 px 值。

This question is asking about getting the default font size - which is necessary in order to convert a relative em value to an exact px value.

这个答案有一个很好的解释，如何去关于获取元素的默认字体大小：

This answer has a pretty good explanation of how to go about getting the default font size of an element:

由于ems测量宽度，您可以随时计算出确切的像素字体
size by创建一个1000 ems长的div并将其
客户端 - 宽度属性除以1000.我似乎回忆起ems被截断到
最接近的千分之一，所以你需要1000个ems来避免错误的
截取像素结果。

Since ems measure width you can always compute the exact pixel font size by creating a div that is 1000 ems long and dividing its client-Width property by 1000. I seem to recall ems are truncated to the nearest thousandth, so you need 1000 ems to avoid an erroneous truncation of the pixel result.

所以，使用这个答案作为指导，我写了以下函数来获取默认字体大小：

So, using this answer as a guide, I wrote the following function to get the default font size:

function getDefaultFontSize(parentElement)
{
    parentElement = parentElement || document.body;
    var div = document.createElement('div');
    div.style.width = "1000em";
    parentElement.appendChild(div);
    var pixels = div.offsetWidth / 1000;
    parentElement.removeChild(div);
    return pixels;
}

一旦你有默认的字体大小，你可以转换任何 em width to px通过将ems乘以元素的默认字体大小并舍入结果：

Once you have the default font size, you can convert any em width to px width by just multiplying the ems by the element's default font size and rounding the result:

Math.round（ems * getDefaultFontSize（element.parentNode））

strong>问题： getDefaultFontSize 理想地应该是一个简单的副作用免费函数，返回默认字体大小。但是它有一个不幸的副作用：它修改了DOM！它附加一个孩子，然后删除孩子。为了获得一个有效的 offsetWidth 属性，需要附加小孩。如果您没有将孩子 div 附加到DOM，则 offsetWidth 属性保持为0，因为元素永远不会渲染。即使我们立即删除子元素，此功能仍可能会产生无意的副作用，例如触发事件（如Internet Explorer的 onpropertychange 或W3C的 DOMSubtreeModified 事件）正在监听父元素。

Problem: The getDefaultFontSize is ideally supposed to be a simple, side-effect free function that returns the default font size. But it DOES have an unfortunate side effect: it modifies the DOM! It appends a child and then removes the child. Appending the child is necessary in order to get a valid offsetWidth property. If you don't append the child div to the DOM, the offsetWidth property remains at 0 because the element is never rendered. Even though we immediately remove the child element, this function can still create unintended side effects, such as firing an event (like Internet Explorer's onpropertychange or W3C's DOMSubtreeModified event) that was listening on the parent element.

问题：有没有办法写一个真正的副作用免费 getDefaultFontSize（）函数不会意外触发事件处理程序或导致其他意外的副作用？

Question: Is there any way to write a truly side-effect free getDefaultFontSize() function that won't accidentally fire event handlers or cause other unintended side effects?

推荐答案

编辑：没有。

要获得给定元素的渲染字体大小，不影响DOM：

To get the rendered font size of a given element, without affecting the DOM:

parseFloat(getComputedStyle(parentElement).fontSize);

这是基于这个问题。

编辑：

在IE中，您必须使用 parentElement.currentStyle [fontSize ] ，但这并不能保证将大小转换为 px 。所以这就是出来。

In IE, you would have to use parentElement.currentStyle["fontSize"], but this is not guaranteed to convert the size to px. So that's out.

此外，此代码段不会获得元素的默认字体大小，而是其实际字体大小，如果它实际上有一个类和与之相关联的样式，这很重要。换句话说，如果元素的字体大小是 2em ，你会得到2个像素的像素数。除非字体大小被内联指定，否则您将无法获得正确的转换率。

Furthermore, this snippet won't get you the default font size of the element, but rather its actual font size, which is important if it has actually got a class and a style associated with it. In other words, if the element's font size is 2em, you'll get the number of pixels in 2 ems. Unless the font size is specified inline, you won't be able to get the conversion ratio right.

这篇关于在Javascript中将em转换为px（并获得默认字体大小）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！