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

Question

假设我的页面上有这个元素：

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

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

所以，如果我这样做：

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

然后我可能会得到16 。

但是如果用户可以在这个网页上注入任意样式呢？ 如果他们做的事情如下：

div { border: 1px solid black; }

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

为了避免这种情况，我可以在div中添加一个样式清单，以消除潜在的“意外风格：”

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