Question

Range.getClientRects()方法会返回由ClientRect占用的range列表，当范围在包含文本的正常范围内时，此方法很有效。

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

但是当span为空时，它无法获得ClientRect。（就像在第二个范围内）

我尝试过以下情况，结果并不理想。

将span的显示属性设置为inline-block
将'\ufeff'插入范围。在这种情况下，我可以获得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

只需将任何字符放入此<span>即可。在这种情况下，我放了一个U+FEFF字符。
```
var elem = $('span')[0];
elem.textContent = '\ufeff';
```
获取一个矩形。
```
var rect = elem.getClientRect();
...
```
将<span>恢复为空。
```
elem.textContent = '';
```

如何在浏览器中获取字体大小的行高？

2 个答案: