使用jQuery和HTML代碼片段，在用戶(hù)點(diǎn)擊“增大文本”或“減小文本”按鈕時(shí)動(dòng)態(tài)調(diào)整網(wǎng)頁(yè)上的文本大小。

jQuery代碼:

$(document).ready(function(){
    const targetSections = ['span', '.section2']; // 目標(biāo)元素選擇器數(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>

查看在線演示

關(guān)於使用jQuery動(dòng)態(tài)調(diào)整文本大小的常見(jiàn)問(wèn)題解答:

以下是一些關(guān)於使用jQuery動(dòng)態(tài)調(diào)整文本大小的常見(jiàn)問(wèn)題的解答：

• 如何使用jQuery動(dòng)態(tài)更改字體大小？ 使用.css()方法。例如：$("p").css("font-size", "20px"); 這將把所有段落元素的字體大小設(shè)置為20px。

• 如何使用jQuery增大或減小字體大小？ 獲取當(dāng)前字體大小，然後加減數(shù)值。例如：let size = parseInt($("p").css("font-size")); size = 2; $("p").css("font-size", size "px"); 這將把所有段落元素的字體大小增加2px。

• 如何使字體大小在窗口調(diào)整大小時(shí)隨窗口大小變化？ 使用.resize()方法。例如：$(window).resize(function() { let size = $(window).width() / 30; $("p").css("font-size", size "px"); }); 這將根據(jù)窗口寬度調(diào)整所有段落元素的字體大小。

• 是否可以使用jQuery動(dòng)畫(huà)化字體大小的更改？ 可以使用.animate()方法。例如：$("p").animate({ fontSize: "20px" }, 1500); 這將使所有段落元素的字體大小在1.5秒內(nèi)逐漸更改為20px。

• 如何僅更改特定元素的字體大?。? 使用特定選擇器。例如：$("p.myClass").css("font-size", "20px"); 這將把所有具有類(lèi)“myClass”的段落元素的字體大小設(shè)置為20px。

• 如何使用jQuery將字體大小重置為其原始值？ 將字體大小設(shè)置為""（空字符串）。例如：$("p").css("font-size", "");

• 如何根據(jù)用戶(hù)的輸入更改字體大小？ 使用.val()方法獲取用戶(hù)輸入，然後使用.css()方法設(shè)置字體大小。

• 如何使用jQuery在點(diǎn)擊元素時(shí)更改其字體大??？ 使用.click()方法。

• 如何使用jQuery在鼠標(biāo)懸停在元素上時(shí)更改其字體大??？ 使用.hover()方法。

• 如何使用jQuery更改特定類(lèi)型的所有元素的字體大?。? 使用類(lèi)型選擇器。例如：$("p").css("font-size", "20px"); 這將更改所有段落元素的字體大小。

代碼已改進(jìn)，增加了對(duì)字體大小單位的處理，避免了潛在的錯(cuò)誤。 此外，對(duì)代碼進(jìn)行了更清晰的註釋?zhuān)瑏K對(duì)常見(jiàn)問(wèn)題解答進(jìn)行了更詳細(xì)的解釋。

以上是jQuery動(dòng)態(tài)調(diào)整文本大小的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！