So passen Sie die Schriftgröße in Javascript an

JavaScript ist eine weit verbreitete Programmiersprache, mit der sich verschiedene interaktive Effekte und Funktionen in Webseiten implementieren lassen. Unter anderem ist das Anpassen der Schriftgröße ein häufiger Vorgang auf Webseiten. In diesem Artikel wird erläutert, wie JavaScript die Textgröße auf Webseiten anpasst.

1. Verwenden Sie DOM-Operationen, um die Schriftgröße anzupassen

DOM (Document Object Model) ist ein wichtiger Bestandteil von JavaScript und wird zum Bearbeiten des Inhalts in Webseiten verwendet. Über das DOM können wir leicht das Element finden, dessen Schriftgröße geändert werden muss, und dann seine Größe mithilfe der Eigenschaft .style.fontSize anpassen.

Zuerst müssen wir das Element finden, dessen Größe geändert werden muss. Das zu ändernde Elementobjekt kann über die ID oder Klasse abgerufen werden, zum Beispiel:

<p id="paragraph">这是一个段落</p>
<p class="text">这是另一个段落</p>

Über die Methoden getElementById und getElementsByClassName in JavaScript können wir diese beiden Elementobjekte abrufen:

var p1 = document.getElementById("paragraph"); //获取id为paragraph的元素对象
var p2 = document.getElementsByClassName("text")[0]; //获取class为text的元素对象数组，取出第一个元素

Als nächstes können wir die Schriftgröße über die Eigenschaft .style.fontSize ändern:

p1.style.fontSize = "20px"; //将id为paragraph的元素的字体大小设置为20px
p2.style.fontSize = "16px"; //将class为text的元素的字体大小设置为16px

Auf diese Weise kann der Effekt der Anpassung der Schriftgröße leicht erzielt werden.

2. Verwenden Sie die jQuery-Bibliothek, um die Schriftgröße anzupassen

jQuery ist eine beliebte JavaScript-Bibliothek, die die Schritte verschiedener Vorgänge vereinfacht und die JavaScript-Programmierung einfacher und präziser macht. Die Verwendung der jQuery-Bibliothek zum Anpassen der Schriftgröße reduziert die Codemenge und ist browserübergreifend kompatibel.

Bevor Sie die jQuery-Bibliothek verwenden, müssen Sie die jQuery-Bibliothek in die Webseite einführen:

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

Anschließend können wir den Selektor in jQuery verwenden, um die benötigten Elemente abzurufen um die Schriftgröße zu ändern, wie unten gezeigt:

$("#paragraph").css("font-size","20px"); //将id为paragraph的元素的字体大小设置为20px
$(".text").css("font-size","16px"); //将class为text的元素的字体大小设置为16px

Mit der jQuery-Bibliothek können Sie nicht nur die .css-Methode zum Ändern der Schriftgröße verwenden, sondern auch die .animate-Methode verwenden, um eine noch schönere Darstellung zu erzielen Animationseffekte. Zum Beispiel:

$("#paragraph").animate({fontSize: "20px"}, 1000); //用1000毫秒的时间将id为paragraph的元素的字体大小调整为20px
$(".text").animate({fontSize: "16px"}, 1000); //用1000毫秒的时间将class为text的元素的字体大小调整为16px

3. Verwenden Sie CSS, um die Schriftgröße zu steuern

Zusätzlich zur Verwendung von JavaScript zur Steuerung der Schriftgröße können Sie auch CSS-Stile verwenden, um die Schriftgröße anzupassen. Sie können die Textgröße auf einer Webseite einfach anpassen, indem Sie das Attribut „font-size“ im