jQuery redimensionner le texte dynamiquement

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']; // 目标元素选择器数组
    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;
    });
});

CODE HTML:

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

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

Le code

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!