Maison > Article > interface Web > Comment modifier l’épaisseur de la police du texte en utilisant JavaScript ?

Comment modifier l’épaisseur de la police du texte en utilisant JavaScript ?

WBOYavant: 2023-08-24 23:45:022048parcourir

如何使用 JavaScript 更改文本的字体粗细？

L'utilisation de JavaScript est l'un des moyens les plus connus de modifier l'épaisseur de la police de n'importe quel texte sur une page Web. Nous pouvons créer des applications interactives en utilisant des éléments JavaScript et HTML. L’épaisseur de la police fait référence à l’épaisseur des caractères. Dans cet article, nous apprendrons comment modifier l'épaisseur de la police du texte à l'aide de JavaScript.

Utiliser l'attribut style fontWeight

Voyons comment modifier l'épaisseur de la police d'un seul élément, tel qu'un paragraphe ou un titre. Pour ce faire nous utiliserons la propriété "style.fontWeight" de l'élément. Cette propriété est un objet qui contient toutes les propriétés CSS et leurs valeurs correspondantes.

Grammaire

Nous pouvons modifier l'épaisseur de la police du texte en utilisant la syntaxe suivante :

document.getElementById("myId").style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"

Ici, nous pouvons spécifier "normal", "plus léger", "gras", "gras" ou une valeur comprise entre 100 et 900 pour la propriété fontWeight.

Par conséquent, nous pouvons attribuer une valeur à la propriété fontWeight de deux manières, à savoir des nombres et des mots-clés.

Exemple : attribuer un numéro à la propriété fontWeight

Pour modifier le poids de la police d'un élément HTML à l'aide de cette méthode, le nombre doit être défini entre 100 et 900. Examinons un exemple d'utilisation de nombres pour modifier l'épaisseur de la police d'un élément de titre.

<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>

Comme nous pouvons le voir dans l'exemple, nous sélectionnons ici l'élément de titre avec l'ID "myHeading" à l'aide de la méthode getElementById puis définissons la propriété font-weight de l'objet sur 300, nous définirons le texte de l'objet sur 300 . L'élément titre est plus clair que la normale.

Exemple : Attribuez des mots-clés à la propriété fontWeight

Pour modifier l'épaisseur de la police d'un élément HTML en utilisant cette méthode, nous pouvons utiliser Normal, Bold ou Bold. Définir font-weight sur normal correspond à définir font-weight sur 400, et définir font-weight sur bold correspond à définir font-weight sur 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>

Comme nous pouvons le voir dans l'exemple, nous utilisons ici la méthode getElementById pour sélectionner l'élément de paragraphe avec l'ID "myParagraph", puis définissons la propriété font-weight de l'objet sur "bolder", que nous définissons sur "bolder". rendre le texte de l'élément de paragraphe plus gras qu'auparavant.

Modifier l'épaisseur de la police de plusieurs éléments

Supposons que si vous souhaitez modifier l'épaisseur de police de plusieurs éléments à la fois, comme tous les paragraphes d'un document, nous pouvons alors utiliser la méthode "querySelectorAll". Il renvoie une liste de nœuds de tous les éléments HTML correspondant au sélecteur CSS donné.

Exemple : utilisation de la méthode forEach

Regardons un exemple d'utilisation de la méthode forEach pour modifier l'épaisseur de la police de tous les éléments d'un paragraphe dans un document.

<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>

Dans l'exemple ci-dessus, nous utilisons "querySelectorAll" pour sélectionner tous les éléments d'un paragraphe dans un document HMTL. Nous utilisons ensuite la méthode forEach de la liste de nœuds pour parcourir tous les paragraphes et définir leur poids de police sur 700.

La méthode "forEach" est un moyen utile de parcourir une liste de nœuds. Cela nous permet d'exécuter une fonction sur chaque élément de la liste. Dans cet exemple, nous définissons la propriété "fontWeight" de l'objet style de chaque élément de paragraphe sur 700.

Exemple : Utilisation de la méthode de boucle for-of

Regardons un autre exemple de modification de l'épaisseur de police de plusieurs éléments dans un document à l'aide de la méthode de boucle for-of. Une boucle for-of est une méthode traditionnelle ou une autre façon de parcourir une liste de nœuds.

<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>

Dans cet exemple, nous utilisons une boucle « for-of » pour parcourir un paragraphe et définir son poids de police sur 700. La différence entre la boucle for et la boucle for-of est que la boucle for-of nous permet d'accéder directement aux éléments de la liste de nœuds, alors que dans la boucle for nous accédons à son index.

Conclusion

Dans cet article, nous avons démontré avec succès comment modifier l'épaisseur de la police du texte avec un exemple. Nous voyons ici différents exemples d'utilisation de JavaScript pour modifier l'épaisseur de police d'un seul élément et de plusieurs éléments. Nous avons écrit deux exemples différents en utilisant la méthode forEach et la méthode for-of pour plusieurs éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html for foreach 循环 number 对象选择器

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment supprimer l'ombre de l'objet actuel de la chaîne URL de l'objet IText à l'aide de FabricJS ?Article suivant：Comment supprimer l'ombre de l'objet actuel de la chaîne URL de l'objet IText à l'aide de FabricJS ?

Articles Liés

Voir plus