如何從字體大小計算div高度

是否有一種方法可以計算自動div知道包含字體大小和家庭的高度？瀏覽器如何計算這個值？例如：如何從字體大小計算div高度

<div style="font-size: 14px; font-family: courier">Text</div>

高於div高度將爲16px;對於"font-family: times"它將是17px。

你只想得到身高？或者你想div也是14px？ –

@HermLuna我想計算一下，不訪問DOM。 –

我不認爲CSS可以得到確切的高度。你會用它做什麼？也許，還有另一種方法可以在不訪問DOM的情況下完成。 –

我怕回答你的問題是，它並不簡單。

對於比例字體，行高度或者是

的line-height屬性的值，如果它在絕對長度的set。
<div style="line-height:20px">Text</div>將20像素高
或line-height屬性乘以font-size屬性的值，如果line-height爲無單位的值。
<div style="line-height:1.5; font-size:14px">Text</div>將21px高
或由瀏覽器中選擇的一些值，如果line-height被設置爲normal它的默認值。
<div style="font-size: 14px;">Text</div>通常將圍繞知識+高，但是這可能會在你的榜樣瀏覽器和/或字體

隨着不過等寬字體各不相同，如「快遞」，計算依賴於瀏覽器和瀏覽器設置。
許多瀏覽器對於等寬字體使用比font-size更小的尺寸。這是一個歷史慣例。公約沒有說明究竟有多小。
因此，對於等寬字體，所有投注都關閉。抱歉!

2016-10-05 09:29:54

很高興能從非常有知識的人那裏學到一些新的東西。非常有見地的答案@MrLister - 謝謝:) –

這會給你的字體或其他東西之前的div的高度。

$(document).ready(function(){ 

    var outerHeight = $('div').outerHeight(); 
    alert(outerHeight); 

});

2016-10-05 09:01:38 Samir

我想計算div高度而不訪問DOM。 –

因爲'div'是一個'block level'元素。因此，它將佔用'100％'寬度，並且它將佔據與其內容相關的高度。沒有訪問任何DOM，你如何獲得高度？無論是CSS還是JS，您都必須參考DOM。如果沒有那個指向高度，你怎麼確定你需要哪個高度的元素。 – Samir

在這種情況下，容器的高度由line-height確定，該值自動計算並可能因使用不同的字體而有所不同。您可以強制顯式設置CSS中的行高。

在這撥弄我設置的第一兩個div線的高度在20像素，而在第三它是由瀏覽器來計算：https://jsfiddle.net/wvp476cL/1/

你可以（和設置）使用JavaScript元素的高度。

2016-10-05 09:31:54 christo

回答