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>
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>
<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>