Use jQuery and HTML code snippets to dynamically adjust the text size on the web page when the user clicks the "Increase Text" or "Reduce Text" button.

jQuery code:

$(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 Code:

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

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

View online demonstration

FAQs on dynamically resizing text with jQuery:

Here are some answers to some frequently asked questions about dynamically resizing text using jQuery:

• How to change font size dynamically using jQuery? Use .css() method. For example: $("p").css("font-size", "20px"); This will set the font size of all paragraph elements to 20px.

• How to use jQuery to increase or decrease font size? Get the current font size, then add or subtract the value. For example: let size = parseInt($("p").css("font-size")); size = 2; $("p").css("font-size", size "px"); This will increase the font size of all paragraph elements by 2px.

• How to make the font size change with the window size when the window is resized? Use .resize() method. For example: $(window).resize(function() { let size = $(window).width() / 30; $("p").css("font-size", size "px"); }); This will adjust the font size of all paragraph elements according to the window width.

• Is it possible to use jQuery to animate changes in font size? You can use the .animate() method. For example: $("p").animate({ fontSize: "20px" }, 1500); This will gradually change the font size of all paragraph elements to 20px in 1.5 seconds.

• How to change only the font size of a specific element? Use a specific selector. For example: $("p.myClass").css("font-size", "20px"); This will set the font size of all paragraph elements with class "myClass" to 20px.

• How to reset the font size to its original value using jQuery? Set the font size to "" (empty string). For example: $("p").css("font-size", "");

• How to change the font size based on user input? Use the .val() method to get user input, and then use the .css() method to set the font size.

• How to use jQuery to change its font size when clicking an element? Use .click() method.

• How to use jQuery to change its font size when the mouse is hovering over an element? Use .hover() method.

• How to change the font size of all elements of a specific type using jQuery? Use the type selector. For example: $("p").css("font-size", "20px"); This will change the font size of all paragraph elements.

Code has been improved, adding processing of font size units to avoid potential errors. In addition, the code is clearer and the FAQ is explained in more detail.

The above is the detailed content of jQuery Resizing Text Dynamically. For more information, please follow other related articles on the PHP Chinese website!