如何保证一个元素都会有一个特定的高度

Question

说，我有我的网页上这个元素：

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

我想用JavaScript来衡量div的高度要弄清楚有多少像素是等价到1em的那个元素。

所以，如果我做的：

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

然后我可能会16。

但是，如果用户可以在这个网页上注入任意样式呢？适用于所有div元素

div { border: 1px solid black; } 

然后我会得到18，因为意想不到的边界：如果他们这样做。

为了避免这种情况，我的风格一箩筐添加到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;">