Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie die Schriftgröße in Javascript

So ändern Sie die Schriftgröße in Javascript

青灯夜游
青灯夜游Original
2021-06-18 14:46:1315610Durchsuche

In Javascript können Sie die Schriftgröße des Style-Objekts verwenden. Diese Eigenschaft kann die Schriftgröße des Textes festlegen.

So ändern Sie die Schriftgröße in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

In Javascript können Sie die FontSize-Eigenschaft des Style-Objekts verwenden, um die Schriftgröße zu ändern.

Nehmen wir ein Beispiel, um zu sehen, wie das Attribut „fontSize“ die Schriftgröße ändert.

Schauen Sie sich zuerst das Layout an, schreiben Sie einen einfachen Satz und schreiben Sie zwei Schaltflächen:

<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>
<p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>

Die Darstellung ist wie folgt:

Dann müssen Sie die Textgröße steuern, indem Sie auf die Plus- und Minus-Schaltflächen klicken js-Code lautet wie folgt:

<script>
    window.onload= function(){
        var oPtxt=document.getElementById("p1");
        var oBtn1=document.getElementById("Btn1");
        var oBtn2=document.getElementById("Btn2");
        var num = 14; /*定义一个初始变量*/
        oBtn1.onclick = function(){
            num++;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        };
        oBtn2.onclick = function(){
            num--;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        }
    }
</script>

Klicken Sie einmal auf die Schaltfläche „+“, dann wird der Text um ein Pixel vergrößert. Klicken Sie weiter und er wird immer größer:

Klicken Sie auf die Schaltfläche „-“ und dann auf den Text um ein Pixel verkleinert, klicken Sie weiter. Es wird immer kleiner:

So einfach ist das. Achten Sie beim Definieren der Anfangsvariablen darauf, dass es sich um eine globale Variable handeln muss, und wenn Sie die Schaltfläche betätigen müssen Wenn Sie den Text ändern, wird die Variable erhöht und verringert. Es muss sich um eine lokale Variable handeln.

【Verwandte Empfehlung: Javascript-Lerntutorial

Beschreibung: HTML-DOM-Stil-Attribut „fontSize“ Das Attribut „fontSize“ legt die Schriftgröße des Texts fest oder gibt sie zurück.返 Grammatik: 回 Zurück zu den Eigenschaften der Schriftgröße:

object.style.fontSize
E

Eigenschaften der Schriftgröße festlegen:
  • object.style.fontSize = "value"

    Eigenschaften:

Wert

Beschreibung xx- kleinx-kleinkleinmittelgrößerSchriftgröße um eine relative Einheit erhöhenLänge Schriftgröße in Längeneinheiten definieren % wird die Schriftgröße festgelegt auf % der Schriftgröße des übergeordneten ElementsWeitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideo
    groß
  • x-groß
  • xx-groß
  • Stellen Sie die Schriftgröße auf verschiedene feste Größen ein, von xx-klein bis xx-groß
  • kleiner
  • Schriftgröße um eine relative Einheit verringern
! !

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Schriftgröße in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn