jQueryおよびHTMLコードスニペットを使用して、ユーザーが「テキストの増加」または「テキストの削減」ボタンをクリックすると、Webページのテキストサイズを動的に調(diào)整します。

jqueryコード：

$(document).ready(function(){
    const targetSections = ['span', '.section2']; // 目標元素選擇器數(shù)組
    const selector = targetSections.join(','); // 將選擇器數(shù)組連接成字符串

    // 獲取初始字體大小
    const originalFontSize = $(selector).css('font-size');

    // 重置字體大小
    $(".resetFont").click(function(){
        $(selector).css('font-size', originalFontSize);
    });

    // 增大字體大小
    $(".increaseFont").click(function(){
        let currentFontSize = parseFloat($(selector).css('font-size'), 10);
        let newFontSize = currentFontSize * 1.2;
        $(selector).css('font-size', newFontSize + 'px'); // 添加單位px
        return false;
    });

    // 減小字體大小
    $(".decreaseFont").click(function(){
        let currentFontSize = parseFloat($(selector).css('font-size'), 10);
        let newFontSize = currentFontSize * 0.8;
        $(selector).css('font-size', newFontSize + 'px'); // 添加單位px
        return false;
    });
});

htmlコード：

<button class="increaseFont">+</button>
<button class="decreaseFont">-</button>
<button class="resetFont">=</button>

<p>此段落字體大小可調(diào)。</p>
<div class="section2">此部分字體大小也可調(diào)！</div>
<p>此段落不受影響。</p>

オンラインデモンストレーションを表示

jQueryを使用して動的にサイズのテキストを変更するFAQ：

ここに、jQueryを使用して動的にサイズのテキストを変更することについてよくある質(zhì)問に対するいくつかの答えがあります：

• jQueryを使用してフォントサイズを動的に変更する方法は？ .css()メソッドを使用します。たとえば、$("p").css("font-size", "20px");これにより、すべての段落要素のフォントサイズが20pxになります。

• jQueryを使用してフォントサイズを拡大または縮小するにはどうすればよいですか？ 現(xiàn)在のフォントサイズを取得し、値を追加または減算します。たとえば、let size = parseInt($("p").css("font-size")); size = 2; $("p").css("font-size", size "px");これにより、すべての段落要素のフォントサイズが2px増加します。

• ウィンドウのサイズが変更されたときにウィンドウサイズでフォントサイズを変更するにはどうすればよいですか？ .resize()メソッドを使用します。たとえば、$(window).resize(function() { let size = $(window).width() / 30; $("p").css("font-size", size "px"); });これにより、ウィンドウの幅に応じてすべての段落要素のフォントサイズが調(diào)整されます。

• jQueryを使用してフォントサイズの変更をアニメーション化することは可能ですか？ .animate()メソッドを使用できます。たとえば、$("p").animate({ fontSize: "20px" }, 1500);これにより、すべての段落要素のフォントサイズが1.5秒で20pxに徐々に変更されます。

• 特定の要素のフォントサイズのみを変更するにはどうすればよいですか？ 特定のセレクターを使用します。たとえば、$("p.myClass").css("font-size", "20px");これにより、クラス「myclass」が20pxになるすべての段落要素のフォントサイズが設定されます。

• jQueryを使用してフォントサイズを元の値にリセットする方法は？ フォントサイズを""（空の文字列）に設定します。たとえば、$("p").css("font-size", "");

• ユーザー入力に基づいてフォントサイズを変更する方法は？ ユーザー入力を取得するには.val()メソッドを使用し、.css()メソッドを使用してフォントサイズを設定します。

• 要素をクリックするときにjqueryを使用してフォントサイズを変更するにはどうすればよいですか？ .click()メソッドを使用します。

• マウスが要素の上にホバリングしているときにjqueryを使用してフォントサイズを変更するにはどうすればよいですか？ .hover()メソッドを使用します。

• jQueryを使用して特定のタイプのすべての要素のフォントサイズを変更する方法は？ タイプセレクターを使用します。たとえば、$("p").css("font-size", "20px");これにより、すべての段落要素のフォントサイズが変更されます。

コードが改善され、潛在的なエラーを回避するためにフォントサイズユニットの処理が追加されました。 さらに、コードはより明確であり、FAQについて詳しく説明します。

以上がjQueryはテキストを動的にサイズ変更しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。