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"
Nach dem Login kopieren
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="myHeading">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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>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>
Nach dem Login kopieren
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!
