Die Verwendung von JavaScript ist eine der bekanntesten Methoden, um die Schriftstärke von Text auf einer Webseite zu ändern. Wir können interaktive Anwendungen mit JavaScript- und HTML-Elementen erstellen. Die Schriftstärke bezieht sich auf die Dicke der Zeichen. In diesem Artikel erfahren Sie, wie Sie die Schriftstärke von Text mithilfe von JavaScript ändern.
Verwenden Sie das Attribut „style fontWeight“
Sehen wir uns an, wie Sie die Schriftstärke eines einzelnen Elements ändern, beispielsweise eines Absatzes oder einer Überschrift. Dazu verwenden wir die Eigenschaft „style.fontWeight“ des Elements. Diese Eigenschaft ist ein Objekt, das alle CSS-Eigenschaften und ihre entsprechenden Werte enthält.
Grammatik
Wir können die folgende Syntax verwenden, um die Schriftstärke des Textes zu ändern-
document.getElementById("myId").style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"
Hier können wir für die Eigenschaft „fontWeight“ „normal“, „heller“, „fett“, „bold“ oder einen Wert zwischen 100 und 900 angeben.
Wir können der Eigenschaft „fontWeight“ also auf zwei Arten einen Wert zuweisen, nämlich durch Zahlen und durch Schlüsselwörter.
Beispiel: Weisen Sie der Eigenschaft „fontWeight“ eine Nummer zu
Um die Schriftstärke eines HTML-Elements mit dieser Methode zu ändern, sollte die Zahl zwischen 100 und 900 eingestellt werden. Schauen wir uns ein Beispiel für die Verwendung von Zahlen an, um die Schriftstärke eines Titelelements zu ändern.
<html>
<body>
<h2 id="Change-Font-Weight-of-HTML-Element-in-JavaScript">Change Font Weight of HTML Element in JavaScript</h2>
<button onclick="myfuction()">Click to change font weight to 300</button>
<script>
function myfuction(){
const heading = document.getElementById("myHeading");
heading.style.fontWeight = 300;
}
</script>
</body>
</html>
Wie wir im Beispiel sehen können, wählen wir hier das Überschriftenelement mit der ID „myHeading“ mithilfe der getElementById-Methode aus und setzen dann die Eigenschaft „font-weight“ des Objekts auf 300. Wir setzen den Text des Objekts auf 300 . Das Titelelement ist heller als normal.
Beispiel: Zuweisen von Schlüsselwörtern zur Eigenschaft „fontWeight“
Um die Schriftstärke eines HTML-Elements mit dieser Methode zu ändern, können wir Normal, Fett oder Fett verwenden. Das Festlegen der Schriftstärke auf „Normal“ entspricht dem Festlegen der Schriftstärke auf 400, und das Festlegen der Schriftstärke auf „Fett“ entspricht dem Festlegen der Schriftstärke auf 700.
<html>
<body>
<div id="myDiv">
<p id="myParagraph">
Change Font Weight of HTML Element using
keywords Method
</p>
</div>
<button onclick="myfuction()">Click to change font weight to bolder</button>
<script>
function myfuction(){
const paragraph = document.getElementById("myParagraph");
paragraph.style.fontWeight = "bolder";
}
</script>
</body>
</html>
Wie wir im Beispiel sehen können, verwenden wir hier die Methode getElementById, um das Absatzelement mit der ID „myParagraph“ auszuwählen und setzen dann die Eigenschaft „font-weight“ des Objekts auf „bolder“, die wir auf „bolder“ setzen Machen Sie den Text des Absatzelements fetter als zuvor.
Schriftstärke mehrerer Elemente ändern
Angenommen, Sie möchten die Schriftstärke mehrerer Elemente gleichzeitig ändern, beispielsweise aller Absätze in einem Dokument, dann können wir die Methode „querySelectorAll“ verwenden. Es gibt eine Knotenliste aller HTML-Elemente zurück, die dem angegebenen CSS-Selektor entsprechen.
Beispiel: Verwendung der forEach-Methode
Sehen wir uns ein Beispiel für die Verwendung der forEach-Methode an, um die Schriftstärke aller Elemente eines Absatzes in einem Dokument zu ändern.
<html>
<body>
<div id="myDiv">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
paragraph.style.fontWeight = 700;
});
}
</script>
</body>
</html>
Im obigen Beispiel verwenden wir „querySelectorAll“, um alle Elemente eines Absatzes in einem HTML-Dokument auszuwählen. Anschließend verwenden wir die forEach-Methode der Knotenliste, um alle Absätze zu durchlaufen und deren Schriftstärke auf 700 festzulegen.
Die Methode „forEach“ ist eine nützliche Möglichkeit, eine Liste von Knoten zu durchlaufen. Es ermöglicht uns, für jedes Element in der Liste eine Funktion auszuführen. In diesem Beispiel setzen wir die Eigenschaft „fontWeight“ des Stilobjekts jedes Absatzelements auf 700.
Beispiel: Verwendung der For-Of-Schleifenmethode
Sehen wir uns ein weiteres Beispiel für die Änderung der Schriftstärke mehrerer Elemente in einem Dokument mithilfe der For-Of-Schleifenmethode an. Eine for-of-Schleife ist eine herkömmliche Methode oder eine andere Möglichkeit, eine Liste von Knoten zu durchlaufen.
<html>
<body>
<h3 id="Example-of-Font-Weight-Text-Changing-for-of-method">Example of Font-Weight Text Changing for-of method</h3>
<div id="myDiv">
<p>First Paragraph </p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
for (const paragraph of paragraphs) {
paragraph.style.fontWeight = 700;
}
}
</script>
</body>
</html>
In diesem Beispiel verwenden wir eine „for-of“-Schleife, um einen Absatz zu durchlaufen und seine Schriftstärke auf 700 zu setzen. Der Unterschied zwischen der for-Schleife und der for-of-Schleife besteht darin, dass wir mit der for-of-Schleife direkt auf die Elemente der Knotenliste zugreifen können, während wir in der for-Schleife auf deren Index zugreifen.
Fazit
In diesem Artikel haben wir anhand eines Beispiels erfolgreich demonstriert, wie man die Schriftstärke von Text ändert. Hier sehen wir verschiedene Beispiele für die Verwendung von JavaScript zum Ändern der Schriftstärke eines einzelnen Elements und mehrerer Elemente. Wir haben zwei verschiedene Beispiele geschrieben, die die forEach-Methode und die for-of-Methode für mehrere Elemente verwenden.
Das obige ist der detaillierte Inhalt vonWie ändere ich die Schriftstärke von Text mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ersetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AMDetaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Benutzerdefinierte Google -Search -API -Setup -TutorialMar 04, 2025 am 01:06 AMDieses Tutorial zeigt Ihnen, wie Sie eine benutzerdefinierte Google -Such -API in Ihr Blog oder Ihre Website integrieren und ein raffinierteres Sucherlebnis bieten als Standard -WordPress -Themen -Suchfunktionen. Es ist überraschend einfach! Sie können die Suche auf y beschränken
Erstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AMHier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
Beispielfarben JSON -DateiMar 03, 2025 am 12:35 AMDiese Artikelserie wurde Mitte 2017 mit aktuellen Informationen und neuen Beispielen umgeschrieben. In diesem JSON -Beispiel werden wir uns ansehen, wie wir einfache Werte in einer Datei mit JSON -Format speichern können. Mit der Notation des Schlüsselwertpaares können wir jede Art speichern
8 atemberaubende JQuery -Seiten -Layout -PluginsMar 06, 2025 am 12:48 AMNutzen Sie JQuery für mühelose Webseiten -Layouts: 8 Essential Plugins JQuery vereinfacht das Webseitenlayout erheblich. In diesem Artikel werden acht leistungsstarke JQuery -Plugins hervorgehoben, die den Prozess optimieren, insbesondere nützlich für die manuelle Website -Erstellung
Was ist ' this ' in JavaScript?Mar 04, 2025 am 01:15 AMKernpunkte Dies in JavaScript bezieht sich normalerweise auf ein Objekt, das die Methode "besitzt", aber es hängt davon ab, wie die Funktion aufgerufen wird. Wenn es kein aktuelles Objekt gibt, bezieht sich dies auf das globale Objekt. In einem Webbrowser wird es durch Fenster dargestellt. Wenn Sie eine Funktion aufrufen, wird das globale Objekt beibehalten. Sie können den Kontext mithilfe von Methoden wie CALL (), Apply () und Bind () ändern. Diese Methoden rufen die Funktion mit dem angegebenen Wert und den Parametern auf. JavaScript ist eine hervorragende Programmiersprache. Vor ein paar Jahren war dieser Satz
Verbessern Sie Ihr JQuery -Wissen mit dem Quell BetrachterMar 05, 2025 am 12:54 AMJQuery ist ein großartiges JavaScript -Framework. Wie in jeder Bibliothek ist es jedoch manchmal notwendig, unter die Motorhaube zu gehen, um herauszufinden, was los ist. Vielleicht liegt es daran, dass Sie einen Fehler verfolgen oder nur neugierig darauf sind, wie JQuery eine bestimmte Benutzeroberfläche erreicht
10 Mobile Cheat Sheets für die mobile EntwicklungMar 05, 2025 am 12:43 AMDieser Beitrag erstellt hilfreiche Cheat -Blätter, Referenzführer, schnelle Rezepte und Code -Snippets für die Entwicklung von Android-, Blackberry und iPhone -App. Kein Entwickler sollte ohne sie sein! Touch Gesten -Referenzhandbuch (PDF) Eine wertvolle Ressource für Desig
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
