style.lineHeightプロパティ

投稿日: 2013年11月3日 作成者: alphasis

style.lineHeightは、要素のスタイル属性のline-heightプロパティの値を取得、もしくは、設定するプロパティ。

line-heightプロパティは、行間（行の高さ）を指定することができる。

構文

取得

var $lineHeight = $elementReference.style.lineHeight;

戻り値

要素のスタイル属性のline-heightプロパティの値。

設定

$elementReference.style.lineHeight = "normal | number | length | percentage | inherit";
normal | number | length | percentage | inherit
下記の何れかの方法で指定する。初期設定値は「normal」。
  • normal：標準。ブラウザ自動判定。
  • number：数値。単位を付けない数値。「1.5」は「150%」や「1.5em」と同等。
  • length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
  • percentage：「%」や「em」を付けた割合で指定。基準はフォントサイズ。
  • inherit：親要素の設定を継承。

サンプル







サンプルのline-heightプロパティの値：

Sample Element
サンプル要素

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを「line-heightプロパティ」の値に設定する。設定値を「サンプルのline-heightプロパティの値：」の右横に表示する。「Sample Element <br /> サンプル要素」を指定した行間で表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setLineHeight( $lineHeight ) {
 var $element = document.getElementById( "sample" );
 $element.style.lineHeight = $lineHeight;
 var $lineHeight = $element.style.lineHeight;
 document.getElementById( "sampleOutput" ).innerHTML = $lineHeight;
}
</script>

HTML

<button onclick="setLineHeight('normal');">normal</button>
<br />
<button onclick="setLineHeight('1');">1</button>
<button onclick="setLineHeight('1.2');">1.2</button>
<button onclick="setLineHeight('2');">2</button>
<button onclick="setLineHeight('3');">3</button>
<button onclick="setLineHeight('4');">4</button>
<button onclick="setLineHeight('5');">5</button>
<br />
<button onclick="setLineHeight('30px');">30px</button>
<button onclick="setLineHeight('60px');">60px</button>
<button onclick="setLineHeight('30pt');">30pt</button>
<button onclick="setLineHeight('60pt');">60pt</button>
<br />
<button onclick="setLineHeight('100%');">100%</button>
<button onclick="setLineHeight('120%');">120%</button>
<button onclick="setLineHeight('200%');">200%</button>
<button onclick="setLineHeight('300%');">300%</button>
<button onclick="setLineHeight('400%');">400%</button>
<button onclick="setLineHeight('500%');">500%</button>
<br />
<button onclick="setLineHeight('1em');">1em</button>
<button onclick="setLineHeight('1.2em');">1.2em</button>
<button onclick="setLineHeight('2em');">2em</button>
<button onclick="setLineHeight('3em');">3em</button>
<button onclick="setLineHeight('4em');">4em</button>
<button onclick="setLineHeight('5em');">5em</button>
<br />
<button onclick="setLineHeight('inherit');">inherit</button>
<br />
<p>サンプルのline-heightプロパティの値：<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; border: 1px solid red; background-color: yellow;">
 Sample Element <br /> サンプル要素
</p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク