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

How can i get default font size in pixels by using JavaScript or 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创建一个1000 ems长的div，并将其
client-Width属性除以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;
}

一旦你有默认的字体大小，你可以转换任何<$ c $通过将ems乘以元素的默认字体大小并将结果四舍五入，将 em width更改为 px width：

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 event），正在侦听父元素。

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?

推荐答案

编辑：不，

No, there isn't.

要获得给定元素的渲染字体大小，而不影响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 ems中的像素数。除非字体大小指定为内联，否则您将无法正确获取转换比率。

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