HTML DOMのfontSizeプロパティとは？フォントサイズの設定・取得方法を解説
HTML DOM の Style オブジェクトが持つ fontSize プロパティは、要素のフォントサイズを設定（set）または取得（get）するために使用されるプロパティです。JavaScript から動的に文字の大きさを変更したい場合に活用でき、ユーザーの操作に応じた柔軟な UI を実現できます。
fontSizeプロパティの構文
fontSize プロパティを設定する際の基本構文は以下の通りです。
object.style.fontSize = "value|initial|inherit"
指定できる値の一覧
| 値 | 説明 |
|---|---|
| xx-small x-small small medium large x-large xx-large | キーワードでフォントサイズを指定します。xx-small から xx-large までの7段階から選択できます。 |
| smaller | テキストのフォントサイズを、相対単位で1段階小さくします。 |
| larger | テキストのフォントサイズを、相対単位で1段階大きくします。 |
| length | px や em、pt などの有効な長さの単位でフォントサイズを定義します。 |
| % | 親要素のフォントサイズに対する割合（%）として、子要素のフォントサイズを相対的に設定します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
fontSizeプロパティの使用例
それでは、fontSize プロパティの具体的な使用例を見ていきましょう。次のサンプルでは、ボタンをクリックするとリスト項目のフォントサイズが一括して「xx-large」に変更されます。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
li{
font-size: 1.1em;
background-color: snow;
font-family: cursive;
}
</style>
<script>
function changeFontSize() {
for(var i=0;i<3;i++){
document.getElementsByTagName("li")[i].style.fontSize="xx-large";
}
document.getElementById("Sample").innerHTML="上記リストのフォントサイズが xx-large に設定されました";
}
</script>
</head>
<body>
<ul>
<li>これはリスト項目1です。</li>
<li>これはリスト項目2です。</li>
<li>これはリスト項目3です。</li>
</ul>
<p>下のボタンをクリックすると、上のリスト項目のフォントサイズが変更されます</p>
<button onclick="changeFontSize()">Change Font Size</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを初期表示すると、リストは CSS で指定されたフォントサイズ（1.1em）で描画されます。
ここで「Change Font Size」ボタンをクリックすると −
ループ処理によって3つの li 要素すべての style.fontSize が「xx-large」に書き換えられ、リスト全体の文字が大きく表示されます。同時に、id="Sample" の段落には完了メッセージが出力されます。
このように fontSize プロパティを使えば、CSS を事前に用意しなくても JavaScript だけで動的にフォントサイズを制御できます。アクセシビリティ対応の文字サイズ切り替え機能などにも応用できるので、ぜひ覚えておきましょう。
-
【初心者向け】HTML DOMスタイルのfontFamilyプロパティの使い方とサンプルコード
HTML DOMスタイルのfontFamilyプロパティとはHTML DOMのfontFamilyプロパティは、選択した要素に対してフォントファミリー（フォントのリスト）を設定または取得するために使用されるプロパティです。フォントを指定する際には、多くの環境で表示できるWebセーフフォントを使用し、さらに代替となるフォントを併せて指定することが推奨されています。構文fontFamilyプロパティを設定する場合の構文は以下のとおりです。object.style.fontFamily = font1, font2, etc.|initial|inheritここで、font1、font2などはカンマ
-
HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説
HTML DOMのStyleオブジェクトが持つfontプロパティは、CSSのフォントに関する6つの個別プロパティ（font-style、font-variant、font-weight、font-size、line-height、font-family）を一括して取得・設定するために使用されます。このうちfont-size（フォントサイズ）とfont-family（フォントファミリー）は必須の値であり、省略された他の値にはデフォルト値が自動的に適用されます。 fontプロパティの値を取得する構文 現在設定されているfontプロパティの値を取得する場合は、以下の構文を使用します。 object.