在Javascript中将em转换为px(并获取默认字体大小)

Question

在某些情况下,获得em测量的精确像素宽度会很有用.例如,假设您有一个具有CSS属性(如边框或填充)的元素,该元素以ems为单位测量,您需要获得边框或填充的精确像素宽度.有一个涉及这个主题的现有问题:

如何使用JavaScript或JQuery获取默认字体大小(以像素为单位)？

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

这个答案对如何获取元素的默认字体大小有很好的解释:

由于ems测量宽度,你总是可以通过创建一个1000 ems长的div并将其client-Width属性除以1000来计算精确的像素字体大小.我似乎记得ems被截断到最接近的千分之一,所以你需要1000 ems到避免错误地截断像素结果.

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

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乘以元素的默认字体大小并将结果四舍五入来将任何em宽度转换为px宽度:

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

问题:该getDefaultFontSize理想地应该是一个简单的,无副作用的函数,返回的默认字体大小.但它DOES有一个不幸的副作用:它修改DOM!它附加一个孩子,然后移除孩子.为了获得有效的offsetWidth财产,必须附加孩子.如果未将子项追加div到DOM,则该offsetWidth属性保持为0,因为该元素从不呈现.即使我们立即删除子元素,此函数仍然可以创建意外的副作用,例如触发正在侦听父元素的事件(如Internet Explorer onpropertychange或W3C的DOMSubtreeModified事件).

问题:有没有办法编写一个真正的副作用免费getDefaultFontSize()功能,不会意外触发事件处理程序或导致其他意外的副作用？

Answer 1

编辑:不,没有.

要获得给定元素的呈现字体大小,而不影响DOM:

parseFloat(getComputedStyle(parentElement).fontSize);

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

编辑:

在IE中,您必须使用parentElement.currentStyle["fontSize"],但不保证将大小转换为px.所以那就是了.

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

Answer 2

我有一个更好的答案.我的代码将在变量中的unit-px中存储1em值em.

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

现在,只要您'getValue'在参数中使用该测试div的id 调用此函数,您将拥有一个变量名称em,其值将包含px中的1 em.