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

问题描述

在某些情况下，获得 em 测量的精确像素宽度会很有用.例如，假设您有一个具有以 em 为单位的 CSS 属性(如边框或内边距)的元素，您需要获取边框或内边距的准确像素宽度.有一个与此主题相关的现有问题:

如何我可以使用 JavaScript 或 JQuery 获取以像素为单位的默认字体大小吗?

这个问题是关于获取默认字体大小 - 这是将相对 em 值转换为精确的 px 所必需的价值.

这个答案很好地解释了如何获取元素的默认字体大小:><块引用>

由于 ems 测量宽度，因此您始终可以计算出精确的像素字体通过创建一个 1000 ems 长的 div 并将其划分为大小client-Width 属性减少 1000.我似乎记得 ems 被截断为最近的千分之一，所以你需要 1000 ems 以避免错误截断像素结果.

因此，使用此答案作为指导，我编写了以下函数来获取默认字体大小:

function getDefaultFontSize(parentElement){parentElement = parentElement ||文件体；var div = document.createElement('div');div.style.width = "1000em";parentElement.appendChild(div);var 像素 = div.offsetWidth/1000;parentElement.removeChild(div);返回像素；}

一旦你有了默认的字体大小，你可以将任何 em 宽度转换为 px 宽度，只需将 em 乘以元素的默认字体大小并四舍五入结果:

Math.round(ems * getDefaultFontSize(element.parentNode))

问题: getDefaultFontSize 理想情况下应该是一个简单的、无副作用的函数，它返回默认字体大小.但它确实有一个不幸的副作用:它修改了 DOM！它附加一个孩子，然后删除孩子.为了获得有效的 offsetWidth 属性，必须附加子元素.如果您不将子 div 附加到 DOM，offsetWidth 属性将保持为 0，因为该元素永远不会呈现.即使我们立即删除了子元素，此函数仍然会产生意想不到的副作用，例如触发正在侦听的事件(如 Internet Explorer 的 onpropertychange 或 W3C 的 DOMSubtreeModified 事件)在父元素上.

问题: 有什么方法可以编写一个真正无副作用的 getDefaultFontSize() 函数，它不会意外触发事件处理程序或导致其他意想不到的副作用?

解决方案

不，没有.

在不影响 DOM 的情况下获取给定元素的渲染字体大小:

parseFloat(getComputedStyle(parentElement).fontSize);

这是基于对这个问题的回答.

<小时>

在 IE 中，您必须使用 parentElement.currentStyle["fontSize"]，但这并不能保证将大小转换为 px.就这样了.

此外，此代码段不会为您提供元素的默认字体大小，而是它的实际字体大小，如果它确实具有与之关联的类和样式，这一点很重要.换句话说，如果元素的字体大小是 2em，您将获得 2 em 的像素数.除非内联指定字体大小，否则您将无法获得正确的转换比例.

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?

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:

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

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

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.

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?

解决方案

Edit: No, there isn't.

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

parseFloat(getComputedStyle(parentElement).fontSize);

This is based off the answer to this question.

---

Edit:

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.

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