如何在瀏覽器中獲取字體大小的行高？

Question

Range.getClientRects()方法返回由range占用的ClientRect列表，當范圍在具有文本的正常范圍內時，這種方法很有效。

<div class="line">
  <span class="run">Hello!</span><span class="run"></span>
</div>

但是當span為空時它無法獲得ClientRect 。 （就像在第二個跨度）

我嘗試了以下，但結果不盡如人意。

• 將span的display屬性設置為inline-block
• 將'\'插入span。 在這種情況下，我可以獲得ClientRect但這會搞亂代碼的其他部分。

如果我可以從font-size計算行高，那將是最好的。 有沒有辦法在px中獲得空跨度的行高？

注意：我不是想獲得line-height css屬性。 在這種情況下， line-height將是normal 。

Answer 1

您可以遍歷跨度上方的DOM樹，以查找具有數字行高定義的最近元素。 在我的測試用例中，這似乎也適用於百分比行高 - 它獲得計算的行高而不是百分比。 雖然我不確定跨瀏覽器的支持。

演示： http ： //jsfiddle.net/colllin/DHLWW/

碼：

var lineHeight = -1;
var $span = $('span');
var tree = $span.get().concat( $span.parents().get() );
$(tree).each(function(index, element) {
    if (lineHeight < 0) {
        lineHeight = parseFloat($(element).css('line-height')) || -1;
    }
});
$(document.body).append('<br>line-height of span: '+lineHeight);

Answer 2

1. 只需將任何字符放入此<span> 。 在這種情況下，我放了一個U+FEFF字符。

    var elem = $('span')[0]; elem.textContent = '\'; 

2. 得到一個矩形。

    var rect = elem.getClientRect(); ... 

3. 將<span>恢復為空。

    elem.textContent = '';