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

在本教程中，程式設計師將學習如何使用 JavaScript 更改文字的字型大小。許多應用程式允許使用者根據自己的需求更改**字型大小**。我們需要使用 JavaScript 更改預設字型大小來實現這一點。

在我們繼續學習本教程之前，讓我們先了解一下可以為字型大小分配哪些值。

使用者可以為字型大小分配的不同值

我們可以為任何元素的字型大小分配以下值。每個值都會以不同的方式更改字型大小，我們在這裡對此進行了說明。

  • xx-large | x-large | large | medium | small | x-small | xx-small - 使用者可以使用這些值根據值設定固定的字型大小。

  • smaller - 它將字型大小減小一個單位。如果使用者使用畫素作為字型大小，則表示“smaller”將字型大小減小 1 px。

  • larger - 它是 smaller 的反義詞，並將字型大小增加一個單位。

  • initial - 它將字型大小設定為預設值，即 medium。

  • % - 它將字型大小設定為父元素字型大小的百分比。例如，父元素的字型大小為 100px，而我們為子元素設定了 10%，則子元素的字型大小將為 10px。

  • 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 文字的字型大小為 50px，子 div 為 20px。當用戶點選按鈕時，它會將子 div 的字型大小設定為“inherit”，這意味著子 div 的字型大小將與父 div 的字型大小相同，即 50px。

<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+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.