2011-12-22 15 views
5

span(または他のインライン要素)のline-heightをJavaScript/jQueryで入手する方法はありますか?スパンの行の高さを取得する方法は?

私はが正確なソート1.2emnormalまたはfontSize * 1.5のような経験則のない値、ピクセルline-heightを計算する必要があります。

私がする必要があるのは、spanの背景を伸ばして、行全体の高さを塗りつぶすことです。私はスパンを伸ばすためにパディングを加えることができると考えましたが、これに対しては正確にline-heightが必要です。誰かが別のアプローチを提供できる場合は、これも役立ちます。

+0

あなたのスパンには、display:block、 'span {line-height:12px; display:block;} ' –

答えて

3
$("span").css("line-height"); 

たとえば、計算されたpx値を文字列 "16px"として取得します。それは、カバーの下にIEのcurrentStyleまたは標準getComputedStyleを使用します。それはセッターとして働くように見えるのは驚くべきことですが、それは全く違うものですelem.style.something = valueです。

+0

TFMによってバックアップされたもの:http://api.jquery.com/css/ ;-) – PPvG

+1

これは私が最初に試したことです。残念ながらWebKitブラウザでは、前もって手動で 'line-height'を設定しない限り、文字列" normal "を返します。私はjQuery 1.6.1を使用しています。それ以降のバージョンでは動作が異なりますか? –

+0

@RadanGanchevあなたは正しいです、それはいくつかの要素のために正常を返します。 'console.log(getComputedStyle(v).lineHeight); });'このページでpx値を返すと、ほとんどの場合このページでpx値が返されます。しかし、要素。 – Esailija

0

spanにdivが含まれていると仮定します。

相対し、100%の高さを取るブロックとしてスパン:

あなたは、位置へのdivを設定することができます。

このようにして、スパンを必要に応じて伸ばします。

here (注意:効果を確認するために、透明にスパンの背景色を変更するには、赤のdivを見ることができるはずです)

+0

私はインライン要素が必要なので、私は 'span'を使用しています。私の目標は、行の途中から始まるテキストをマークすることです。 'display:block'は私のためには動作しません。 –

0

デザインがそれを可能にしている場合は、適用することができますあなたがouterHeightを使用し、その後対象とされている要素にブロックインライン...

var inlineHeight = $('.inline-height').css("display", "inline-block").outerHeight(); 
//console.log('Inline Height:' + inlineHeight); 
2

これを行う簡単な方法は次のとおりです。

var style = window.getComputedStyle(element); 
var lineHeight = style.getPropertyValue('line-height'); 

jQueryを使わずに行の高さの計算値を取得し、IE9以降のすべてのブラウザで動作します。

関連する問題