4

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

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

ClientRect但是当 span 为空时它无法获取。（就像在第二个跨度中）

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

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

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

注意：我不是想获得line-heightcss 属性。在这种情况下，line-height将是normal。

4

2 回答 2

1

您可以遍历 span 上方的 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-27T06:56:01.103 回答
1

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

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

  2. 得到一个矩形。

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

  3. 恢复<span>为空。

    elem.textContent = '';
于 2014-02-27T07:45:11.150 回答