如何使用下拉列表在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来改变或设置字体样式。