style.fontSizeは、要素のスタイル属性のfont-sizeプロパティの値を取得、もしくは、設定するプロパティ。
font-sizeプロパティは、フォントサイズ（文字の大きさ）を指定することができる。
構文
取得
var $fontSize = $elementReference.style.fontSize;
戻り値
要素のスタイル属性のfont-sizeプロパティの値。
設定
$elementReference.style.fontSize = "absolute-size | relative-size | length | percentage | inherit";
- absolute-size | relative-size | length | percentage | inherit
- 下記の何れかの方法で指定する。
-
absolute-size：絶対的サイズ。
- xx-small：最小。
- x-small：極小。
- small：小。
- medium：標準。
- large：大。
- x-large：極大。
- xx-large：最大。
-
relative-size：相対的サイズ。基準は親要素のフォントサイズ。
- smaller：親要素のフォントサイズより小さい。
- larger：親要素のフォントサイズより大きい。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- percentage：「%」や「em」を付けた割合で指定。基準は親要素のフォントサイズ。
- inherit：親要素の設定を継承。
-
absolute-size：絶対的サイズ。
サンプル
サンプルのfont-sizeプロパティの値：
Sample Element / サンプル要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「font-sizeプロパティ」の値に設定する。設定値を「サンプルのfont-sizeプロパティの値：」の右横に表示する。「Sample Element / サンプル要素 」のテキストを指定したフォントサイズで表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setFontSize( $fontSize ) {
var $element = document.getElementById( "sample" );
$element.style.fontSize = $fontSize;
var $fontSize = $element.style.fontSize;
document.getElementById( "sampleOutput" ).innerHTML = $fontSize;
}
</script>
function setFontSize( $fontSize ) {
var $element = document.getElementById( "sample" );
$element.style.fontSize = $fontSize;
var $fontSize = $element.style.fontSize;
document.getElementById( "sampleOutput" ).innerHTML = $fontSize;
}
</script>
HTML
<button onclick="setFontSize('xx-small');">xx-small</button>
<button onclick="setFontSize('x-small');">x-small</button>
<button onclick="setFontSize('small');">small</button>
<button onclick="setFontSize('medium');">medium</button>
<button onclick="setFontSize('large');">large</button>
<button onclick="setFontSize('x-large');">x-large</button>
<button onclick="setFontSize('xx-large');">xx-large</button>
<br />
<button onclick="setFontSize('smaller');">smaller</button>
<button onclick="setFontSize('larger');">larger</button>
<br />
<button onclick="setFontSize('30px');">30px</button>
<button onclick="setFontSize('20pt');">20pt</button>
<button onclick="setFontSize('2em');">2em</button>
<button onclick="setFontSize('200%');">200%</button>
<br />
<button onclick="setFontSize('inherit');">inherit</button>
<br />
<p>サンプルのfont-sizeプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>
<button onclick="setFontSize('x-small');">x-small</button>
<button onclick="setFontSize('small');">small</button>
<button onclick="setFontSize('medium');">medium</button>
<button onclick="setFontSize('large');">large</button>
<button onclick="setFontSize('x-large');">x-large</button>
<button onclick="setFontSize('xx-large');">xx-large</button>
<br />
<button onclick="setFontSize('smaller');">smaller</button>
<button onclick="setFontSize('larger');">larger</button>
<br />
<button onclick="setFontSize('30px');">30px</button>
<button onclick="setFontSize('20pt');">20pt</button>
<button onclick="setFontSize('2em');">2em</button>
<button onclick="setFontSize('200%');">200%</button>
<br />
<button onclick="setFontSize('inherit');">inherit</button>
<br />
<p>サンプルのfont-sizeプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>