如何保证元素具有特定的高度

Question

说我的页面上有这个元素：

<div style="height: 1em;">&nbsp;</div>

我想使用JavaScript来衡量div的高度，以确定该元素的px等于1em。

所以如果我这样做了：

document.querySelector('div').getBoundingClientRect()

然后我可能会16。

但是如果用户可以在这个网页上注入任意样式呢？如果他们做了类似的事情该怎么办？

div { border: 1px solid black; }

然后我会得到18，因为应用于所有div元素的意外边框。

为了避免这种情况，我可以在div中添加一个样式清单，以消除潜在的＆＃34;意想不到的风格：＆＃34;

<div style="border: 0; margin: 0; padding: 0; height: 1em;">&nbsp;</div>

但样式列表是否全面？如果没有，我还需要其他哪些款式？或者有更好的方法来进行此计算吗？

Answer 1

在元素上设置font-style: 1em !important;，并使用Window#getComputedStyle在px中获取字体大小：

var fontSize = window.getComputedStyle(div).fontSize;

console.log(fontSize);

<div id="div" style="font-size: 1em;"></div>

我以前没有防弹答案：

如果用户使用高度大于16的边框和/或填充，则会失败。

您可以在元素上使用box-sizing: border-box。使用此框大小调整时，边框和填充不会增加元素的尺寸。内容区域是原始宽度/高度减去任何填充和边框。

console.log(div.getBoundingClientRect().height);

div {
  padding: 3px;
  border: 2px solid black;
}

<div id="div" style="height: 1em; box-sizing: border-box;">