如何保證一個元素都會有一個特定的高度

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