在某些情况下,获得em测量的精确像素宽度可能很有用。例如,假设您有一个具有CSS属性(如border或padding)的元素(以ems为单位),并且您需要获取border或padding的确切像素宽度。有一个涉及此主题的现有问题:
em
[如何使用JavaScript或JQuery获取默认字体大小(以像素为单位)?
这个问题是关于获取 默认字体大小的问题 ,这是将相对em值转换为精确px值所必需的。
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
offsetWidth
div
onpropertychange
DOMSubtreeModified
问题: 有什么方法可以编写真正的无副作用getDefaultFontSize()函数,而不会意外触发事件处理程序或引起其他意外副作用?
getDefaultFontSize()
编辑:不,没有。
在不影响DOM的情况下获取给定元素的渲染字体大小:
parseFloat(getComputedStyle(parentElement).fontSize);
编辑:
在IE中,您必须使用parentElement.currentStyle["fontSize"],但不能保证将大小转换为px。这样就可以了。
parentElement.currentStyle["fontSize"]
此外,此代码段不会为您提供元素的默认字体大小,而是您的 实际 字体大小,如果它确实有一个与之关联的类和样式,则这很重要。换句话说,如果元素的字体大小为2em,您将获得2个ems中的像素数。除非内联指定字体大小,否则您将无法正确获得转换率。
2em