在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()函数,不会意外触发事件处理程序或导致其他意想不到的副作用?

编辑:不,没有。

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

 parseFloat(getComputedStyle(parentElement).fontSize); 

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


编辑:

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

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

如果你需要快速和肮脏的东西(和基于字体大小的基体,而不是一个元素),我会去:

 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 

我有一个更好的答案。 我的代码会将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的值。