JQuery Änderung des Textes dynamisch

Verwenden Sie JQuery- und HTML -Code -Snippets, um die Textgröße auf der Webseite dynamisch anzupassen, wenn der Benutzer auf die Schaltfläche "Text erhöhen" oder "Text reduzieren" klickt.

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>

Online -Demonstration

anzeigen

FAQs zum dynamischen Größenänderung Text mit JQuery:

Hier finden Sie einige Antworten auf einige häufig gestellte Fragen zum dynamischen Größenänderung von Text mit JQuery:

• Wie ändert ich die Schriftgröße dynamisch mit JQuery? Methode .css() verwenden. Zum Beispiel: $("p").css("font-size", "20px"); setzt die Schriftgröße aller Absatzelemente auf 20px.

• Wie kann ich JQuery verwenden, um die Schriftgröße zu erhöhen oder zu verringern? die aktuelle Schriftgröße abrufen und dann den Wert hinzufügen oder subtrahieren. Zum Beispiel: let size = parseInt($("p").css("font-size")); size = 2; $("p").css("font-size", size "px"); Dies erhöht die Schriftgröße aller Absatzelemente um 2px.

• Wie ändert sich die Schriftgröße mit der Fenstergröße, wenn das Fenster geändert wird? Methode .resize() verwenden. Zum Beispiel: $(window).resize(function() { let size = $(window).width() / 30; $("p").css("font-size", size "px"); }); Dies passt die Schriftgröße aller Absatzelemente entsprechend der Fensterbreite an.

• Ist es möglich, JQuery zu animierten Veränderungen der Schriftgröße zu verwenden? Sie können die .animate() -Methode verwenden. Zum Beispiel: $("p").animate({ fontSize: "20px" }, 1500); Dies wird die Schriftgröße aller Absatzelemente nach und nach in 1,5 Sekunden auf 20px verändert.

• Wie ändert ich nur die Schriftgröße eines bestimmten Elements? Verwenden Sie einen bestimmten Selektor. Zum Beispiel: $("p.myClass").css("font-size", "20px"); setzt die Schriftgröße aller Absatzelemente mit der Klasse "MyClass" auf 20px.

• Wie setze die Schriftgröße mit JQuery auf ihren ursprünglichen Wert zurück? Stellen Sie die Schriftgröße auf "" (leere Zeichenfolge) ein. Zum Beispiel: $("p").css("font-size", "");

• Wie ändere ich die Schriftgröße basierend auf der Benutzereingabe? Verwenden Sie die Methode .val(), um die Benutzereingabe zu erhalten, und dann die Methode .css(), um die Schriftgröße festzulegen.

• Wie kann ich JQuery verwenden, um seine Schriftgröße beim Klicken auf ein Element zu ändern? Methode .click() verwenden.

• Wie kann ich JQuery verwenden, um die Schriftgröße zu ändern, wenn die Maus über ein Element schwebt? Methode .hover() verwenden.

• Wie ändert ich die Schriftgröße aller Elemente eines bestimmten Typs mit JQuery? Verwenden Sie den Typ Selector. Zum Beispiel: $("p").css("font-size", "20px"); Dies ändert die Schriftgröße aller Absatzelemente.

Code wurde verbessert, wobei die Verarbeitung von Schriftgrößeneinheiten hinzugefügt wird, um potenzielle Fehler zu vermeiden. Darüber hinaus ist der Code klarer und die FAQ wird ausführlicher erläutert.

Das obige ist der detaillierte Inhalt vonJQuery Änderung des Textes dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!