在JavaScript中将em转换为px（并获取默认字体大小）

在某些情况下，可以获得实时测量的精确像素宽度。 例如，假设您有一个带有CSS属性的元素（如边框或填充），这是以ems度量的，您需要获取边框或填充的精确像素宽度。 有一个涉及这个话题的现有问题：

如何通过使用JavaScript或JQuery获取像素的默认字体大小？

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

这个答案有一个很好的解释如何得到一个元素的默认字体大小：

由于ems可以测量宽度，所以你可以通过创build一个1000 ems长的div，然后将它的client-width属性除以1000来计算确切的像素字体大小。我似乎记得ems被截断到最接近的千分之一，所以你需要1000埃姆避免像素结果的错误截断。

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

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

一旦你有了默认的字体大小，你可以通过将ems乘以元素的默认字体大小并舍入结果来将任意宽度转换为px宽度：

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

问题： getDefaultFontSize理论上应该是一个简单的副作用自由函数，它返回默认的字体大小。 但它有一个不幸的副作用：它修改DOM！ 它附加一个孩子，然后移除孩子。 追加孩子是必要的，以获得一个有效的offsetWidth属性。 如果不将子div追加到DOM，则offsetWidth属性保持为0，因为该元素从不呈现。 尽pipe我们立即删除了子元素，但这个函数仍然可能会产生意想不到的副作用，比如触发父元素的事件（如Internet Explorer的onpropertychange或W3C的DOMSubtreeModified事件）。

问：是否有任何方法可以写一个真正的副作用免费getDefaultFontSize()函数，不会意外触发事件处理程序或导致其他意想不到的副作用？

Answer 1

编辑：不，没有。

为了得到给定元素的渲染字体大小，而不影响DOM：

 parseFloat(getComputedStyle(parentElement).fontSize); 

这是基于这个问题的答案。

---

编辑：

在IE中，你将不得不使用parentElement.currentStyle["fontSize"] ，但不能保证将大小转换为px 。 所以这样了。

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

Answer 2

如果你需要快速和肮脏的东西（和基于字体大小的基体，而不是一个元素），我会去：

 Number(getComputedStyle(document.body,null).fontSize.replace(/[^\d]/g, '')) Number( // Casts numeric strings to number getComputedStyle( // takes element and returns CSSStyleDeclaration object document.body,null) // use document.body to get first "styled" element .fontSize // get fontSize property .replace(/[^\d]/g, '') // simple regex that will strip out non-numbers ) // returns number 

Answer 3

我有一个更好的答案。 我的代码会将1em的值存储在variablesem unit-px中。

1. 把这个div放在你的HTML代码的任何地方

    <div id="div" style="height:0;width:0;outline:none;border:none;padding:none;margin:none;"></div> 

2. 把这个函数放在你的JavaScript文件中

    var em; function getValue(id){ var div = document.getElementById(id); div.style.height = 1em; em = div.offsetHeight; } 

现在，无论什么时候，只要在参数中调用带有该testingdiv id的函数'getValue' ，就会得到一个variables名称em ，其中包含px中1 em的值。