JavaScriptでフォントサイズを変更する方法

JavaScript では、Style オブジェクトの fontSize プロパティを使用してフォント サイズを変更できます。このプロパティは、テキストのフォント サイズを設定できます。構文形式は、「element object.style.fontSize="value」です。 「」。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript では、Style オブジェクトの fontSize プロパティを使用してフォント サイズを変更できます。

fontSize 属性がフォント サイズをどのように変更するかを例で見てみましょう。

まず、レイアウトを見て、簡単な文と 2 つのボタンを書きます:

<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>
<p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>

レンダリングは次のとおりです:

次に、プラスとマイナスのボタンをクリックしてテキストのサイズを制御する必要があります。js コードは次のとおりです:

<script>
    window.onload= function(){
        var oPtxt=document.getElementById("p1");
        var oBtn1=document.getElementById("Btn1");
        var oBtn2=document.getElementById("Btn2");
        var num = 14; /*定义一个初始变量*/
        oBtn1.onclick = function(){
            num++;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        };
        oBtn2.onclick = function(){
            num--;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        }
    }
</script>

「 」ボタンを 1 回クリックすると、テキストが 1 ピクセルずつ増加します

「-」ボタンを 1 回クリックすると、テキストが 1 ピクセルずつ小さくなります。クリックし続けると、

これはとても簡単です。初期変数を定義するときは、それがグローバル変数である必要があることに注意してください。ボタンを押してテキストを変更する場合、変数の増減はローカル変数である必要があります。

[関連する推奨事項: JavaScript 学習チュートリアル]

説明: HTML DOM スタイルの fontSize 属性

fontSize プロパティは、テキストのフォント サイズを設定または返します。

構文:

• fontSize プロパティを返す:

object.style.fontSize

• fontSize プロパティを設定する:

object.style.fontSize = "value"

属性値:

##値説明smallerlargerlength%プログラミング関連の知識の詳細については、次のサイトをご覧ください:

##xx-小 xx-小 小 中 large xx-large xx-large フォント サイズを xx-small から xx までのさまざまな固定サイズに設定します。 -large
フォント サイズを 1 相対単位で縮小します
フォント サイズ 相対単位でサイズを大きくします
長さ単位でフォント サイズを定義します
Will font-size は親要素のフォント サイズの % に設定されます

プログラミング ビデオ

! ！

以上がJavaScriptでフォントサイズを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。