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

  • Z时代
  • 2024-01-10
  • 分类：问答

在某些情况下，获得em测量的精确像素宽度可能很有用。例如，假设您有一个具有CSS属性（如border或padding）的元素（以ems为单位），并且您需要获取border或padding的确切像素宽度。有一个涉及此主题的现有问题：

[如何使用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理想情况下，该函数应该是一个简单的无副作用的函数，该函数返回默认字体大小。但这 确实

有一个不幸的副作用：它修改了DOM！它附加一个孩子，然后删除该孩子。为了获得有效的offsetWidth属性，必须追加孩子。如果不将子级附加div到DOM，则该offsetWidth属性将保持为0，因为从不渲染该元素。即使我们立即删除了子元素，此功能仍然会产生意外的副作用，例如引发正在监听父元素的事件（例如Internet

Explorer onpropertychange或W3C的DOMSubtreeModified事件）。

有什么方法可以编写真正的无副作用getDefaultFontSize()函数，而不会意外触发事件处理程序或引起其他意外副作用？

回答：

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

parseFloat(getComputedStyle(parentElement).fontSize);

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

此外，此代码段不会为您提供元素的默认字体大小，而是您的 实际

字体大小，如果它确实有一个与之关联的类和样式，则这很重要。换句话说，如果元素的字体大小为2em，您将获得2个ems中的像素数。除非内联指定字体大小，否则您将无法正确获得转换率。

以上是 在JavaScript中将em转换为px（并获取默认字体大小） 的全部内容， 来源链接： utcz.com/qa/425794.html

回到顶部