如何在 JavaScript 中使用下拉列表更改字型樣式？

我們可以使用 style fontFamily 屬性透過 JavaScript 中的下拉列表來更改字型樣式。為了使字型更改透過下拉列表生效，當在下拉列表中選擇一個選項時，我們可以使用 onchange 事件。

在我們繼續之前，讓我們詳細瞭解一下下拉列表。下拉列表是一個可切換的選單，允許使用者從各種選項中選擇一個專案。這些選項可以使用 HTML 程式碼定義，這些程式碼與函式相連線。這些函式在您單擊或選擇此選項時被觸發並開始執行。

語法

以下是 fontFamily CSS 屬性的語法：

element.style.fontFamily = font

透過使用 fontFamily CSS 屬性，我們可以格式化文字的字型，option 標籤用於儲存字型值，option 標籤的語法如下：

<option value="value">

每當表單提交時，value 屬性將指定值。選擇傳送的值後，我們使用上述語法指定值和字型樣式。changefontstyle() 用於在 JavaScript 中更改文字的字型樣式，並且 Times Roman 在字型樣式選項卡中設定為預設值。

步驟

應遵循以下步驟：

  • 步驟 1 - 在 HTML 中建立一個包含字型樣式選擇的下拉列表。列表中的每個選項都應具有與您要應用的字型樣式相對應的值。

  • 步驟 2 - 使用 JavaScript 選擇要應用字型樣式的元素。

  • 步驟 3 - 向下拉列表新增 changeFontStyle 以偵聽所選選項的更改。

  • 步驟 4 - 向下拉列表新增事件偵聽器以偵聽所選選項的更改。

  • 步驟 5 - 當事件偵聽器被觸發時，從下拉列表中選擇選定的字型樣式。

  • 步驟 6 - 使用 JavaScript 將元素的字型樣式設定為選定的字型樣式。

  • 步驟 7 - style.fontFamily 是用於設定或更改文字字體系列的 HTML DOM CSS 屬性。

  • 步驟 8 - 如果需要，新增其他程式碼以處理您想要實現的任何其他邏輯或功能。

示例

在這些示例中，我們將瞭解如何使用 JavaScript 使用下拉列表更改文字的字型樣式。

<html>
<body>
   <div id="content">
      <h2 style="color:blue;">
         Font Style Changes After Selecting the Dropdown List
      </h2>
   </div>
   <select id="input" class="input" onchange="changingFontStyle (this);">
      <option value="Times New Roman" elected="selected">
         Times New Roman
      </option>
      <option value="Arial">Arial</option>
      <option value="fantasy">Fantasy</option>
      <option value="cursive">cursive</option>
   </select>
   <script>
      var changingFontStyle = function (fontstyle) {
         document.getElementById("content").style.fontFamily = fontstyle.value;
      }
   </script>
</body>
</html>

示例

讓我們看另一個示例，其中我們對下拉列表使用事件偵聽器來更改所選選項的文字字型樣式。

<html>
<head>
   <style>
      .Arial{
         font-family: Arial;
      }
      .Algerian{
         font-family: Algerian;
      }
      .Berlin-sans-fb{
         font-family: 'Berlin sans fb';
      }
      .Times-new-roman{
         font-family: 'Times New Roman';
      }
   </style>
</head>
<body>
   <div> <h3>Style of the Text Changes with the drop down</h3> </div>
   <div id="output-text">
      Hi Guys, Welcome to Javascript Program
   </div>
   <div>
      <select id="input-font" class="input" onchange="changingFont (this);">
      <option value="Times-new-roman" selected="selected">Times New Roman</option>
      <option value="Arial">Arial</option>
      <option value="Algerian">Algerian</option>
      <option value="Berlin-sans-fb">Berlin Sans FB</option>
      <option value="bold" class="bolder">Tebal</option>
      </select>
   </div>
   <script>
   var changingFont = function(fontstyle) {
      console.log(fontstyle.value)
      document.getElementById("output-text").className = "text-center " + fontstyle.value;
   }
   </script>
</body>
</html>

在本文中，我們演示瞭如何使用下拉列表以及示例更改字型樣式。我們在這裡看到了示例，其中 fontFamily CSS 屬性和 changeFontStyle 將用於在從下拉列表中選擇選項時更改或設定字型樣式。

更新於：2023年3月17日

6K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告