So verwenden Sie jQuery, damit Besucher die Schriftgröße Ihrer Website ändern können

Sie können jQuery verwenden, um Ihren Website-Besuchern die Möglichkeit zu geben, die Schriftgröße Ihrer Website zu ändern. Dies ist eine nützliche Oberfläche, da Ihre Besucher die Schrift nach Belieben vergrößern oder verkleinern können, um ihnen das beste Leseerlebnis zu bieten. Wenn Sie mit jQuery nicht vertraut sind, finden Sie in unserem Artikel jQuery-Grundlagen eine Erklärung zur Funktionsweise von jQuery.

Dies ist eine interaktive Codeanzeige, die Ihnen HTML, CSS, jQuery und eine Demo der Ausgabe zeigt.

Einrichten von HTML für die Größenänderung

Als erstes müssen Sie Ihren HTML-Code so einrichten, dass die jQuery bestimmen kann, welche Größe geändert werden soll. Wenn Sie mit der Ausstattung Ihres HTML-Dokuments als Referenz für jQuery nicht vertraut sind, lesen Sie unseren Artikel Getting Your HTML Ready for jQuery.

Zuerst müssen Sie eine Größenänderungsschnittstelle hinzufügen. Keine Sorge, das klingt komplizierter als es tatsächlich ist. Dies ist nur etwas, mit dem Ihre Website-Benutzer interagieren können, um die Schriftart Ihrer Webseite zu ändern. Wie Sie im obigen Beispiel sehen können, haben wir Links verwendet, die als Plus, Minus und das Wort „Zurücksetzen“ dargestellt wurden.“

<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>

Jeder Link sollte eine Klasse haben, die die Aktion darstellt, z. B. „Erhöhen“ oder „Verringern“.“ Wenn wir die jQuery hinzufügen, verwenden wir diese Klassen, um anzugeben, welcher Link die Schriftgröße erhöhen, verringern oder zurücksetzen soll.

Beurteilen Sie nun, welche Elemente oder Abschnitte in der Größe geändert werden sollen. Wenn es sich um einen Abschnitt handelt, möchten Sie möglicherweise ein <div> mit einer Klasse erstellen, damit Sie einen eindeutigen Bereich angeben können, dessen Größe geändert werden soll.

Siehe die Pen jQuery: Ändern der Größe der Schriftartklasse für Webseiten durch Pairdocs (@pairdocs) auf CodePen .

Im obigen Beispiel können Sie sehen, dass das <div> mit der class=“resizable“ markiert ist, um die Größe zu ändern. Der Rest Ihrer Absätze bleibt jedoch unberührt, es sei denn, Sie geben an, dass die Größe aller <p> -Elemente ebenfalls geändert werden soll.

jQuery für die Größenänderung

jQuery übernimmt das schwere Heben der Größenänderung. Wenn Sie mit jQuery nicht vertraut sind, lesen Sie unseren Artikel jQuery-Grundlagen, um die gängigen Konzepte zu verstehen.

Der erste Schritt besteht darin, ein $(Dokument) zu erstellen.ready-Funktion, die alle Ihre jQuery-Anweisungen einschließt.

$(document).ready(function(){//jQuery statements//jQuery statements});

Als nächstes fügen wir die erste jQuery-Anweisung hinzu, die in diese Funktion aufgenommen wird.

var resize = new Array('element','.class'); resize = resize.join(',');

Diese Anweisung legt fest, welche Elemente oder Klassen in die Größenänderung einbezogen werden sollen. Diese Elemente/Klassen werden in der Variablen „resize.“ Wenn Sie sich das Beispiel zum Ändern der Schriftgröße ansehen, werden Sie feststellen, dass das Element <p> und die Klasse „resizable“ für die Größenänderung ausgewählt wurden.

Nachdem Sie festgelegt haben, welche Elemente oder Klassen betroffen sind, müssen Sie den Code so einrichten, dass die Schriftgröße tatsächlich geändert wird, wenn ein Besucher mit Ihrer Größenänderungsoberfläche interagiert.

Zurücksetzen der Schriftgröße

Unter unserer Anweisung „var resize“ fügen wir eine Anweisung hinzu, die die Schriftart auf ihre ursprüngliche Größe zurücksetzt.

 var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });

Diese Anweisung ruft die Elemente oder Klassen auf, die Sie in der Variablen „resize“ gespeichert haben, und wenn auf den Link mit der Klasse „reset“ geklickt wird, kehrt das Attribut font-size in CSS zu seiner ursprünglichen Größe zurück.

Das $(„.zurücksetzen“).click(function() ruft die Klasse „reset“ aus dem HTML-Code auf. Dadurch kann die jQuery die Schriftgröße zurücksetzen, wenn der Benutzer mit dem Text interagiert, der der Klasse „reset“ zugeordnet ist. In unserem Beispiel ist dieser Text einfach der Link „Zurücksetzen“.

Erhöhen Sie die Schriftgröße

Als nächstes müssen wir eine Anweisung hinzufügen, die die Schriftgröße erhöht. In unserem Beispiel haben wir dem Link „+“ die Klasse „increase“ hinzugefügt, sodass wir die jQuery-Aktion zum Erhöhen der Größe an das „+“ binden müssen.

Dieses Beispiel macht genau das.

//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });

Das Beispiel beginnt damit, dass diese Anweisung davon abhängt, dass ein Benutzer auf den Text klickt, der der Klasse „increase“ zugeordnet ist. Dies ist in unserem Beispiel ein „+“. Die nächsten drei Zeilen fügen neue Variablen hinzu: originalFontSize, originalFontNumber und newFontSize.

originalFontSize sammelt die aktuelle Schriftgröße aus dem CSS und speichert sie. originaFontNumber analysiert diese Zahl, damit jQuery sie lesen kann. Dann nimmt newFontSize die in originalFontNumber gespeicherte Nummer und multipliziert sie mit 1.2.

Dann geht die letzte Zeile in das CSS und ändert die Schriftgröße an newFontSize .

Diese Sequenz wird jedes Mal ausgeführt, wenn auf das „+“ geklickt wird.

Verringern Sie die Schriftgröße

Die decrease-Anweisung ist der vorherigen Anweisung sehr ähnlich. Anstatt jedoch die Schriftgröße mit einer Zahl zu multiplizieren, die die ursprüngliche Schriftnummer erhöht, multipliziert die decrease-Anweisung die ursprüngliche Schriftnummer mit einer Dezimalzahl, wodurch sie reduziert wird.

//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});

Diese Sequenz wird jedes Mal ausgeführt, wenn auf „-“ geklickt wird. Dies reduziert die Schriftgröße mit jedem Klick.