4

Range.getClientRects()メソッドはClientRect占有者のリストを返しrangeます。これは、範囲がテキストを含む通常のスパン内にある場合にうまく機能します。

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

ClientRectただし、スパンが空の場合は取得に失敗します。（2番目のスパンのように）

以下のことを試してみましたが、満足のいく結果ではありませんでした。

  • スパンの表示プロパティをinline-block
  • '\ufeff'スパンに挿入します。この場合、取得できますClientRectが、これによりコードの他の部分が台無しになります。

から行の高さを計算できればfont-size、それが最適です。空のスパンの行の高さを px で取得する方法はありますか?

注:line-height css プロパティを取得しようとしているわけではありません。この場合、 はline-heightになりますnormal。

4

2 に答える 2

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);
于 2014-02-27T06:56:01.103 に答える