Heim Web-Frontend js-Tutorial So ändern Sie die Schriftgröße in Javascript

So ändern Sie die Schriftgröße in Javascript

Jun 18, 2021 pm 02:46 PM
javascript 字体大小

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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
Nach dem Login kopieren
E

Eigenschaften der Schriftgröße festlegen:
  • object.style.fontSize = "value"
    Nach dem Login kopieren
    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!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

So passen Sie die Schriftgröße in OnePlus an_Tutorial zum Festlegen der Schriftgröße in OnePlus So passen Sie die Schriftgröße in OnePlus an_Tutorial zum Festlegen der Schriftgröße in OnePlus Mar 23, 2024 am 08:31 AM

1. Öffnen Sie die [Einstellungen] Ihres Telefons und klicken Sie auf die Option [Anzeige]. 2. Nachdem Sie die Seite mit den Anzeigeeinstellungen aufgerufen haben, klicken Sie auf die Option [Schriftgröße]. 3. Rufen Sie die Einstellungsseite für die Schriftgröße auf und ziehen Sie den Schieberegler nach links oder rechts, um die Schriftgröße anzupassen.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

So legen Sie die Schriftgröße in Eclipse fest So legen Sie die Schriftgröße in Eclipse fest Jan 23, 2024 pm 03:09 PM

Einstellungsschritte: 1. Öffnen Sie Eclipse und rufen Sie die Menüleiste „Fenster“ -> „Einstellungen“ auf. 2. Wählen Sie „Allgemein“ -> „Darstellung“ -> „Farben und Schriftarten“ und klicken Sie rechts auf die Schaltfläche „Bearbeiten“. Wählen Sie unter Schriftart, Schriftart, Größe und anderen Attributen die entsprechende Schriftgröße entsprechend Ihren persönlichen Bedürfnissen aus, z. B. 12, 14 oder 16 usw. 5. Klicken Sie auf die Schaltfläche „Übernehmen“, um die Änderungen zu übernehmen.

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

So stellen Sie die Schriftgröße auf einem Apple-Mobiltelefon ein So stellen Sie die Schriftgröße auf einem Apple-Mobiltelefon ein Mar 08, 2024 pm 03:40 PM

Die Methode zum Einstellen der Schriftgröße von Apple-Mobiltelefonen ist relativ einfach. Viele Benutzer wissen nicht, wie sie sie genau einstellen soll. Es gibt zwei Möglichkeiten, die Schriftgröße über die Telefoneinstellungen und Eingabehilfen anzupassen. Wie stelle ich die Schriftgröße auf Apple-Telefonen ein? Antwort: Stellen Sie die Größe über die Telefoneinstellungen und Eingabehilfen ein. 1. Der Benutzer klickt auf die Telefoneinstellungen, um das Anzeige- und Helligkeitsmenü aufzurufen. 2. Sie können die Option für die Textgröße unter „Anzeige und Helligkeit“ sehen, klicken und schieben. 3. Schieben Sie den Schieberegler, um die Größe des Texts festzulegen. Durch Schieben nach rechts wird er größer, durch Schieben nach links wird er kleiner. 4. Benutzer können die Schriftgröße auch über die Zusatzfunktion im Apple-Mobiltelefon einstellen. 5. Schieben Sie in den Einstellungen „Anzeige und Helligkeit“ weiter nach unten, um die Schaltfläche „Eingabehilfen“ zu finden und darauf zu klicken. 6. Anzeige auswählen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

See all articles