如何使用 JavaScript 更改文本的字体大小？

在本教程中，程序员将学习如何使用 JavaScript 更改文本的字体大小。许多应用程序允许用户根据自己的需求更改字体大小。我们需要使用 JavaScript 更改默认字体大小才能实现这一点。

在我们继续本教程之前，让我们学习可以为字体大小分配哪些值。

用户可以为字体大小分配的不同值

我们可以为任何元素的字体大小分配以下值。每个值都会以不同的方式更改字体大小，我们已在此处进行了说明。

  • xx-large | x-large | large | medium | small | x-small | xx-small − 用户可以使用这些值根据值设置固定的字体大小。

  • smaller − 它将字体大小减小一个单位。如果用户使用像素作为字体大小，则表示“smaller”将字体大小减小 1 像素。

  • larger − 它是 smaller 的反义词，并将字体大小增加一个单位。

  • initial − 它将字体大小设置为默认值，即 medium。

  • % − 它将字体大小设置为父元素字体大小的百分比。例如，父元素的字体大小为 100 像素，我们为子元素设置 10%，则子元素的字体大小将为 10 像素。

  • inherit − 将子元素的字体大小设置为与父元素的字体大小相同。

因此，我们已经看到了用户可以为字体大小分配的不同值，用户可以根据需要使用任何一个值。

使用 JavaScript 更改字体大小

在本节中，我们将学习如何通过访问 HTML 元素来更改字体大小。每个 HTML 元素都包含 style 属性，其中包含该元素的各种样式。我们将使用 style 属性访问元素的字体大小，并为其重新分配一个新值。

用户可以遵循以下语法。

语法

let element = document.getElementById( "element_id" );
element.style.fontsize = "xx-large";

示例

在下面的示例中，我们将使用 id 访问 div 元素，并使用 JavaScript 更改字体大小。

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 130px;
      }
   </style>
</head>
<body>
   <h2>Change the font size using JavaScript.</h2>
   <div>Click the button to change the font size using <i> font-size property of style attribute.</i></div>
   <div id = "fonts"> hello world!</div>
   <button onclick = "changeFontsize()" >change font size</button>
   <script>

      // function to change the font size of div
      function changeFontsize() {
         let fontsDiv = document.getElementById("fonts");
         fontsDiv.style.fontSize = 'xx-large'; // change font size to xx-large
      }
</script>
</body>
</html>

在上面的输出中，用户可以看到，当我们单击按钮时，它会将字体大小更改为 xx-large。

将字体大小更改为父元素的字体大小

在本节中，我们将使用“inherit”值根据父元素的字体大小更改字体大小。

语法

let element = document.getElementById( "element_id" );
element.style.fontsize = “inherit”;

示例

在下面的示例中，我们在父 div 内有一个子 div。最初，父 div 文本的字体大小为 50 像素，子 div 为 20 像素。当用户单击按钮时，它会将子 div 的字体大小设置为“inherit”，这意味着子 div 的字体大小将与父 div 的字体大小相同，即 50 像素。

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 130px;
      }
   </style>
</head>
<body>
   <h2>Change the font size using JavaScript.</h2>
   <div style = "font-size: 50px;" > Click the button to change the font size <i> according to parent elements font size. </i>
      <div id = "fonts" style = "font-size:20px;" >hello world!</div>
      <button onclick = "changeFontsize()" >change font size</button>
   </div>
   <script>
      function changeFontsize() {
         let fontsDiv = document.getElementById("fonts");
         fontsDiv.style.fontSize = 'inherit'; // change font size according to parent element's font size
      }
   </script>
</body>
</html>

用户可以观察到，当他们单击按钮时，“hello world！”文本的字体大小与其父 div 的字体大小相同。

在本教程中，我们演示了用户如何添加使用 JavaScript 更改字体大小的功能。我们已经看到了两个不同的示例。在一个示例中，我们设置了固定字体大小“xx-large”，在另一个示例中，我们设置了“inherit”值，这意味着它将继承自父元素的字体大小。

此外，我们可以将 smaller 和 larger 值设置为字体大小，以分别将其减小或增加一个单位。

更新于：2022年8月8日

7K+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告