📅 最后修改于: 2023-12-03 15:08:38.950000 🧑 作者: Mango
在 Web 开发中，下拉列表是非常常见的元素，通常用于让用户选择一些选项。与此同时，JavaScript 可以用来控制下拉列表，并且可以使用 JavaScript 来更改字体样式。
本文将介绍如何在 JavaScript 中使用下拉列表更改字体样式的方法，并提供实现代码。
首先，我们需要在 HTML 中创建下拉列表。HTML 中使用 select 元素来创建一个下拉列表，option 元素来定义选项：
<label for="selectFont">选择字体：</label>
<select id="selectFont">
<option value="sans-serif">无衬线字体</option>
<option value="serif">衬线字体</option>
<option value="monospace">等宽字体</option>
<option value="cursive">草书字体</option>
<option value="fantasy">艺术字体</option>
</select>
在上面的代码中，我们定义了一个 select 元素和五个 option 元素。每个 option 元素都有一个 value 属性，该属性将在 JavaScript 中用来更改字体样式。
接下来，我们需要使用 JavaScript 来监听下拉列表的变化，并更改字体样式。我们可以使用 addEventListener 方法来注册一个 change 事件的监听器：
const selectFont = document.getElementById('selectFont');
selectFont.addEventListener('change', e => {
const font = e.target.value;
document.body.style.fontFamily = font;
});
在上面的代码中，我们首先获取了 selectFont 元素，并注册了一个 change 事件监听器。当用户选择一个选项时，change 事件就会触发。
当事件触发时，回调函数中的 e 参数将包含事件相关的信息，其中 e.target 是触发事件的元素。我们可以获取用户选择的字体样式，然后将其应用到整个页面的 font-family 样式上。
完整的 HTML 和 JavaScript 代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 下拉列表更改字体样式</title>
</head>
<body>
<label for="selectFont">选择字体：</label>
<select id="selectFont">
<option value="sans-serif">无衬线字体</option>
<option value="serif">衬线字体</option>
<option value="monospace">等宽字体</option>
<option value="cursive">草书字体</option>
<option value="fantasy">艺术字体</option>
</select>
<script>
const selectFont = document.getElementById('selectFont');
selectFont.addEventListener('change', e => {
const font = e.target.value;
document.body.style.fontFamily = font;
});
</script>
</body>
</html>
运行上面的代码，在下拉列表中选择不同的字体样式，页面中的字体将会发生相应的变化。
在本文中，我们介绍了在 JavaScript 中使用下拉列表更改字体样式的方法。我们使用了 HTML 的 select 元素和 JavaScript 的事件监听器来实现这个功能。通过学习本文，您可以更好地掌握 JavaScript 程序员的必备技能之一。