如何在 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+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告