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

Range.getClientRects()方法返回一個由range佔用的ClientRect列表，當範圍在具有文本的正常範圍內時，該方法運行良好。如何從瀏覽器中的字體大小獲取行高？

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

但是當span爲空時，它不能得到ClientRect。（像在第二個跨度）

我試過以下，但結果並不令人滿意。

設定量程的顯示屬性inline-block
插入'\ufeff'到跨度。在這種情況下，我可以得到ClientRect，但這會弄亂代碼的其他部分。

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

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

來源

2014-02-27 ntalbs

什麼其他部分的代碼，搞的一團糟？您能在獲得價值後立即撤消您的更改嗎？ – colllin

您無法從字體大小計算行高 - 它依賴於瀏覽器和與字體系列相關。對不起，超級無益的「答案」:) – colllin

我期望從字體大小計算線高度的公式。現在我明白它取決於瀏覽器和字體家族，這意味着它不能從一個簡單的公式計算出來。感謝您的評論和興趣。 – ntalbs

只要把任何字符到這個<span>。在這種情況下，我把一個U+FEFF字符。
```
var elem = $('span')[0]; 
elem.textContent = '\ufeff'; 
```
獲取一個矩形。
```
var rect = elem.getClientRect(); 
... 
```
將<span>恢復爲空。
```
elem.textContent = ''; 
```

來源

2014-02-27 07:45:11

完美地工作。這正是我想要的。 – ntalbs

呃。正是我所評論的。 – colllin

對不起。我沒有注意到你的評論。 – ntalbs

您可以遍歷跨度上方的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);

來源

2014-02-27 06:56:01 colllin

獲得父元素高度的想法很好。但是，這並不能完全解決問題。考慮到div包含兩個分別具有不同字體大小的跨度。 - – ntalbs

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

回答

相關問題