　スタイルシート内のフォント・サイズの値を持つ。後から「fontSize」属性に値を設定することで，文字色を変更することも可能。設定できる値のうち「smaller」は親要素に対して一段小さいフォント，「larger」は一段大きなフォントとなる。また，「medium」が標準サイズのフォントとなり，「xx-small」，「x-small」，「small」，「medium」，「large」，「x-large」，「xx-large」の順で，サイズが大きくなる。
　スタイルシートでは，「font-size」プロパティにあたる。
　用例では，ボタンをクリックした時，id名「STY」を設定したdiv要素のフォント・サイズの値を変更することで，フォントのサイズを変更している。

用例

ボタン・フォームをクリックした時「fontSize」属性に値を設定することにより，id名「STY」を設定したdiv要素内に表示している文字のフォント・サイズが変わる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>fontSize</title>
<script type="text/javascript">
<!--
function F_Size(VALUE){
    if(document.getElementById){
        document.getElementById("STY").style.fontSize = VALUE
    }
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*フォントのサイズ
<hr>
<form>
    <input type="button" value=" smaller " onClick="F_Size('smaller')">
    <input type="button" value=" larger " onClick="F_Size('larger')">
    <input type="button" value=" xx-small " onClick="F_Size('xx-small')">
    <input type="button" value=" x-small " onClick="F_Size('x-small')">
    <input type="button" value=" small " onClick="F_Size('small')">
    <input type="button" value=" medium " onClick="F_Size('medium')">
    <input type="button" value=" larger " onClick="F_Size('large')">
    <input type="button" value=" x-large " onClick="F_Size('x-large')">
    <input type="button" value=" xx-large " onClick="F_Size('xx-large')">
    <input type="button" value=" 12pt " onClick="F_Size('12pt')">
    <input type="button" value=" 200% " onClick="F_Size('200%')">
</form>
<hr>
<p>
<div id="STY_1" style="font-size:medium">
標準のサイズ
</div>
</p>
<p>
<div id="STY" style="font-size:medium">
いろはにほへと。ABC.
</div>
</p>
</body></html>

この用例を実行する

この記事の目次へ戻る