相关疑难解决方法(0)

在某些情况下,获得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()功能,不会意外触发事件处理程序或导致其他意外的副作用？

我正在寻找一种简单的方法来为我的插件添加一行代码,将几个像素值转换为em值,因为我的项目布局需要在ems中.有没有一种简单的方法可以做到这一点,因为我不想在网站上添加第三方插件.

不会在这里发布代码,因为它与它自己的插件无关.

谢谢.

示例:13px - > ?? em