📅 最后修改于: 2023-12-03 14:52:20.514000 🧑 作者: Mango
在这篇文章中，我们将介绍如何在 JavaScript 中使用下拉列表更改字体样式。我们将从创建下拉列表开始，并在用户更改选择时更新页面字体样式。
要创建下拉列表，我们需要使用 HTML <select> 元素和 <option> 元素。下面是一个简单的例子：
<select id="font-selector">
<option value="Arial">Arial</option>
<option value="Helvetica" selected>Helvetica</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
</select>
在这里，我们为每个字体定义一个选项，并使用 value 属性将其值设置为字体名称。我们还可以使用 selected 属性将默认值设置为 Helvetica。
现在我们已经创建了一个下拉列表，我们需要使用 JavaScript 监听用户更改选择的事件，并更新页面的字体样式。我们可以使用以下代码实现此目的：
const fontSelector = document.getElementById('font-selector');
fontSelector.addEventListener('change', () => {
const selectedFont = fontSelector.options[fontSelector.selectedIndex].value;
document.body.style.fontFamily = selectedFont;
});
在这里，我们将 change 事件侦听器添加到下拉列表中，并定义一个称为 selectedFont 的变量，该变量保存所选择的字体。每次用户更改选择时，我们都会将页面的 font-family 样式设置为所选择的字体。
最终，我们的完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font selector</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is some sample text.</p>
<select id="font-selector">
<option value="Arial">Arial</option>
<option value="Helvetica" selected>Helvetica</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<script>
const fontSelector = document.getElementById('font-selector');
fontSelector.addEventListener('change', () => {
const selectedFont = fontSelector.options[fontSelector.selectedIndex].value;
document.body.style.fontFamily = selectedFont;
});
</script>
</body>
</html>
在这里，我们包含了一个 <h1> 元素和一个 <p> 元素来演示字体更改的效果。请随意更改字体下拉列表中的选项，并观察页面上的字体更改。
在这篇文章中，我们介绍了如何在 JavaScript 中使用下拉列表更改字体样式。通过监听下拉列表的 change 事件并在用户更改选择时更新页面字体样式，我们可以轻松实现这一目标。