jQuery Resizing Text Dynamically

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']; // 目标元素选择器数组
    const selector = targetSections.join(','); // 将选择器数组连接成字符串

    // 获取初始字体大小
    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>此段落字体大小可调。</p>
<div class="section2">此部分字体大小也可调！</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!