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

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

HTML DOMスタイルのfontFamilyプロパティとは

HTML DOMのfontFamilyプロパティは、選択した要素に対してフォントファミリー（フォントのリスト）を設定または取得するために使用されるプロパティです。フォントを指定する際には、多くの環境で表示できるWebセーフフォントを使用し、さらに代替となるフォントを併せて指定することが推奨されています。

構文

fontFamilyプロパティを設定する場合の構文は以下のとおりです。

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

ここで、font1、font2などはカンマで区切られたフォント名のリストです。最初のフォントがユーザーの環境で利用できない場合、2番目以降のフォントが順番に適用されていきます。また、initialを指定するとプロパティ値がデフォルト値に戻り、inheritを指定すると親要素のプロパティ値が継承されます。

fontFamilyプロパティの使用例

それでは、fontFamilyプロパティを使ってリスト項目のフォントを動的に変更する具体例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
    li{
        font-size: 1.1em;
        background-color: snow;
        font-family: cursive;
    }
</style>
<script>
    function changeFontFamily() {
        for(var i=0;i<3;i++){
            document.getElementsByTagName("li")[i].style.fontFamily="Sans-Seriff";
        }
        document.getElementById("Sample").innerHTML="The font family for the above list is now set to Helvetica";
    }
</script>
</head>
<body>
    <ul>
        <li>This is list item 1.</li>
        <li>This is list item 2</li>
        <li>This is list item 3</li>
    </ul>
    <p>Change the above list items font family by clicking the below button</p>
    <button onclick="changeFontFamily()">Change Font Family</button>
    <p id="Sample"></p>
</body>
</html>

出力結果

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

このコードでは、CSSでcursiveフォントが適用された3つのリスト項目が初期状態として表示されます。

続いて、「Change Font Family」ボタンをクリックしてみましょう。

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

ボタンをクリックすると、JavaScriptのchangeFontFamily()関数が実行され、すべてのリスト項目のフォントファミリーがSans-Serif系のフォントに切り替わります。同時に、変更内容を示すメッセージが画面下部に表示されます。

このように、fontFamilyプロパティを活用すれば、JavaScriptから動的に要素のフォントを制御でき、ユーザーの操作に応じた柔軟なデザイン変更が実現できます。

  1. HTML DOMスタイルのlistStylePositionプロパティとは？使い方と設定値を徹底解説

    HTML DOMのlistStylePositionプロパティは、リスト項目（li要素）のマーカー（箇条書きの記号）の位置を設定または取得するために使用されるスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的にリストマーカーの表示位置を変更できます。 listStylePositionプロパティの構文 listStylePositionプロパティを設定する場合の構文は以下の通りです。 object.style.listStylePosition = outside|inside|initial|inherit 指定できる値は次の通りです。 値説明 outs

  2. HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説

    HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり