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

Question

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

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

但是当span为空时，获取不到ClientRect。 (就像在第二个跨度中一样)

我尝试了以下方法，但是，结果并不令人满意。

• 将 span 的显示属性设置为 inline-block
• 将 '\ufeff' 插入到 span 中。在这种情况下，我可以获得 ClientRect 但这会弄乱代码的其他部分。

如果我可以根据font-size 计算行高，那将是最好的。有什么办法可以得到空跨度的行高，单位是px？

注意:我并不是要获取 line-height css 属性。在这种情况下，line-height 将是 normal。

Answer 1

1. 只需将任意字符放入 <span> .在这种情况下，我放了一个 U+FEFF性格。

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

2. 获取一个矩形。

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

3. 恢复 <span>为空。

   elem.textContent = '';