Utilisez des extraits de code jQuery et HTML pour ajuster dynamiquement la taille du texte sur la page Web lorsque l'utilisateur clique sur le bouton "Augmenter le texte" ou "Réduire le texte".

Code 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;
    });
});

CODE 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>

Voir la démonstration en ligne

FAQ sur le redimensionnement dynamiquement du texte avec jQuery:

Voici quelques réponses à certaines questions fréquemment posées sur le redimensionnement dynamique à l'aide de jQuery:

• Comment changer la taille de la police dynamiquement à l'aide de jQuery? Utiliser la méthode .css(). Par exemple: $("p").css("font-size", "20px"); Cela définira la taille de la police de tous les éléments de paragraphe sur 20px.

• Comment utiliser jQuery pour augmenter ou diminuer la taille de la police? Obtenez la taille de la police actuelle, puis ajoutez ou soustrayez la valeur. Par exemple: let size = parseInt($("p").css("font-size")); size = 2; $("p").css("font-size", size "px"); Cela augmentera la taille de la police de tous les éléments de paragraphe de 2px.

• Comment faire changer la taille de la police avec la taille de la fenêtre lorsque la fenêtre est redimensionnée? Utiliser la méthode .resize(). Par exemple: $(window).resize(function() { let size = $(window).width() / 30; $("p").css("font-size", size "px"); }); Cela ajustera la taille de la police de tous les éléments de paragraphe en fonction de la largeur de la fenêtre.

• Est-il possible d'utiliser jQuery pour animer les changements de taille de police? Vous pouvez utiliser la méthode .animate(). Par exemple: $("p").animate({ fontSize: "20px" }, 1500); Cela changera progressivement la taille de la police de tous les éléments de paragraphe à 20px en 1,5 seconde.

• Comment changer uniquement la taille de la police d'un élément spécifique? Utilisez un sélecteur spécifique. Par exemple: $("p.myClass").css("font-size", "20px"); Cela définira la taille de la police de tous les éléments de paragraphe avec la classe "myclass" sur 20px.

• Comment réinitialiser la taille de la police à sa valeur d'origine à l'aide de jQuery? Définissez la taille de la police sur "" (cha?ne vide). Par exemple: $("p").css("font-size", "");

• Comment modifier la taille de la police en fonction de l'entrée utilisateur? Utilisez la méthode .val() pour obtenir la saisie de l'utilisateur, puis utilisez la méthode .css() pour définir la taille de la police.

• Comment utiliser jQuery pour modifier sa taille de police lorsque vous cliquez sur un élément? Utiliser la méthode .click().

• Comment utiliser jQuery pour modifier sa taille de police lorsque la souris plane sur un élément? Utiliser la méthode .hover().

• Comment modifier la taille de la police de tous les éléments d'un type spécifique à l'aide de jQuery? Utilisez le sélecteur de type. Par exemple: $("p").css("font-size", "20px"); Cela modifiera la taille de la police de tous les éléments de paragraphe.

a été amélioré, ajoutant le traitement des unités de taille de police pour éviter les erreurs potentielles. De plus, le code est plus clair et la FAQ est expliquée plus en détail.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!