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

使用JavaScript是更改网页上任何文本的字体粗细的最著名方法之一。我们可以使用JavaScript和HTML元素构建交互式应用程序。字体粗细指的是字符的加粗程度。在本文中，我们将看到如何使用JavaScript更改文本的字体粗细。

使用style fontWeight属性

让我们看看如何更改单个元素（如段落或标题）的字体粗细。为此，我们将使用元素的’style.fontWeight’属性。该属性是一个包含所有CSS属性及其对应值的对象。

语法

我们可以使用以下语法来更改文本的字体粗细−

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

在这里，我们可以将“normal”、“lighter”、“bold”、“bolder”或介于100和900之间的数字值赋给fontWeight属性。

因此，我们可以用两种方式为fontWeight属性赋值，即数字和关键字。

示例：为fontWeight属性赋值

如果要使用此方法更改HTML元素的字体粗细，则数字应设置在100和900之间。让我们通过一个示例来改变标题元素的字体粗细。

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

就像我们在示例中看到的那样，我们使用了getElementById方法来选择具有ID “myHeading”的标题元素，然后将对象的font-weight属性设置为300，从而使标题元素的文本比正常情况下更轻。

示例：将关键词分配给fontWeight属性

通过使用这种方法来改变HTML元素的字体粗细，我们可以使用normal、bold或bolder。将font-weight设置为normal相当于将字体粗细设置为400，而将font-weight设置为bold相当于将字体粗细设置为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>

如我们在示例中所看到的，我们使用了getElementById方法来选择带有ID“myParagraph”的段落元素，然后将对象的font-weight属性设置为“bolder”，这将使段落元素的文本比之前更加粗体。

改变多个元素的字体粗细

假设您想同时更改多个元素的字体粗细，比如文档中的所有段落，那么我们可以使用“querySelectorAll”方法。该方法返回匹配给定CSS选择器的所有HTML元素的节点列表。

示例：使用forEach方法

让我们看一个示例，使用forEach方法来更改文档中所有段落元素的字体粗细。

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

在上面的示例中，我们使用了“querySelectorAll”来选择HTML文档中的所有段落元素。然后，我们使用节点列表的forEach方法迭代所有段落，并将它们的字重设置为700。

‘forEach’方法是一种遍历节点列表的有用方法。它允许我们对列表中的每个元素执行一个函数。在本例中，我们为每个段落元素将样式对象的’fontWeight’属性设置为700。

示例：使用for-of循环方法

让我们看一个另一个示例，使用for-of循环方法来更改文档中多个元素的字重。for-of循环是一种传统的遍历节点列表的方法。

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

在这个示例中，我们使用’for-of’循环遍历段落，并将它们的字体粗细设置为700。for循环和for-of循环的区别在于，for-of循环允许我们直接访问节点列表的元素，而在for循环中，我们访问它的索引。