HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

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.style.font

fontプロパティに設定できる値

fontプロパティに値を設定する際に指定できる主なキーワードは以下のとおりです。

値説明
styleフォントのスタイル（斜体など）を設定します。
variantテキストをスモールキャップス（small-caps）で表示します。
weightフォントの太さ（ボールドなど）を指定します。
sizeフォントサイズを指定します。
lineHeight行間（行の高さ）の距離を指定します。
familyフォントの種類（書体）を設定します。
captionボタンやドロップダウンなどのキャプション付きコントロールに使用されるフォントを適用します。
iconアイコンのラベルに使用されるフォントを指定します。
menuメニューで使用されるフォントです。
message-boxダイアログボックスで使用されるフォントです。
small-caption小さいコントロールで使用されるフォントです。
status-barウィンドウのステータスバーのフォントを現在のフォントに設定します。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

fontプロパティの使用例

それでは、fontプロパティを使った具体的なサンプルコードを見てみましょう。以下の例では、2つの段落に対してCSSで初期フォントを設定し、ボタンをクリックするとJavaScriptによってフォントスタイルが変更されます。

<!DOCTYPE html>
<html>
<head>
<style>
    .PARA1{
        font: oblique small-caps bold 1.3em/3 cursive;
    }
</style>
<script>
    function changeFont() {
        for(var i=0;i<2;i++){
            document.getElementsByClassName("PARA1")[i].style.font="italic bold 30px Verdana";
        }
        document.getElementById("Sample").innerHTML="上の2つの段落のテキストが変更されました";
    }
</script>
</head>
<body>
    <p class="PARA1">これはデモ用テキストです</p>
    <p class="PARA1">これはもう1つのデモ用テキストです</p>
    <p>下のボタンをクリックすると、上の段落のフォントが変更されます</p>
    <button onclick="changeFont()">フォントを変更</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

ページを表示すると、最初はCSSで指定した「oblique（斜体）」「small-caps」「bold」「cursive」のスタイルが適用されています。

HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説

続いて、「フォントを変更」ボタンをクリックすると、JavaScriptのchangeFont()関数が実行され、2つの段落のフォントが「italic bold 30px Verdana」に一括で変更されます。

HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説

さらにボタンをクリックすると、段落の下にあるid="Sample"の要素に変更完了のメッセージが表示されます。

HTML DOM Styleのfontプロパティとは？設定方法と使い方を解説

まとめ

HTML DOMのfontプロパティを使えば、フォント関連の複数のスタイルを1行のコードでまとめて操作できます。特にgetElementsByClassName()などと組み合わせることで、複数の要素に対して効率的にフォントスタイルを適用・変更できるのが大きなメリットです。Webページのタイポグラフィを動的に制御したい場合にぜひ活用してみてください。

  1. HTML DOMのfontSizeプロパティとは？フォントサイズの設定・取得方法を解説

    HTML DOM の Style オブジェクトが持つ fontSize プロパティは、要素のフォントサイズを設定（set）または取得（get）するために使用されるプロパティです。JavaScript から動的に文字の大きさを変更したい場合に活用でき、ユーザーの操作に応じた柔軟な UI を実現できます。 fontSizeプロパティの構文 fontSize プロパティを設定する際の基本構文は以下の通りです。 object.style.fontSize = value|initial|inherit 指定できる値の一覧 値説明 xx-smallx-smallsmallmediumlarg

  2. 【初心者向け】HTML DOMスタイルのfontFamilyプロパティの使い方とサンプルコード

    HTML DOMスタイルのfontFamilyプロパティとはHTML DOMのfontFamilyプロパティは、選択した要素に対してフォントファミリー（フォントのリスト）を設定または取得するために使用されるプロパティです。フォントを指定する際には、多くの環境で表示できるWebセーフフォントを使用し、さらに代替となるフォントを併せて指定することが推奨されています。構文fontFamilyプロパティを設定する場合の構文は以下のとおりです。object.style.fontFamily = font1, font2, etc.|initial|inheritここで、font1、font2などはカンマ