JavaScript 如何设置字体样式

在网页开发中，JavaScript 是一个强大的工具，它能动态地改变网页元素的各种属性，包括字体样式。通过灵活运用 JavaScript，开发者可以为用户创造出更加个性化和交互性强的视觉体验。

我们可以使用 document.getElementById() 方法获取特定元素，然后通过修改其 style 属性来设置字体样式。例如，假设有一个 id 为 “myElement” 的 <p> 标签，要将其字体设置为 Arial，大小为 18 像素，颜色为红色，可以这样做：

var element = document.getElementById("myElement");
element.style.fontFamily = "Arial";
element.style.fontSize = "18px";
element.style.color = "red";

这段代码首先获取了指定元素，然后分别设置了字体家族、字体大小和颜色。这种方法简单直接，适用于对单个元素进行样式调整。

如果想要同时对多个元素应用相同的字体样式，可以使用 document.querySelectorAll() 方法。该方法会返回一个符合指定选择器的元素列表，我们可以遍历这个列表并为每个元素设置样式。比如，要将页面上所有 class 为 “textClass” 的元素字体设置为 Times New Roman，大小为 16 像素，代码如下：

var elements = document.querySelectorAll(".textClass");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.fontFamily = "Times New Roman";
    elements[i].style.fontSize = "16px";
}

JavaScript 还可以根据用户的操作来动态改变字体样式，增强页面的交互性。例如，当用户点击一个按钮时，改变某个元素的字体加粗显示：

<button onclick="makeBold()">加粗字体</button>
<p id="text">这是一段示例文本</p>

<script>
function makeBold() {
    var textElement = document.getElementById("text");
    textElement.style.fontWeight = "bold";
}
</script>

在这个例子中，点击按钮后，makeBold 函数被触发，它获取指定的 <p> 元素并将其字体加粗。

JavaScript 在设置字体样式方面提供了丰富的可能性，无论是静态页面的样式调整，还是为页面添加交互性的动态样式变化，都能轻松实现。开发者可以根据具体需求，巧妙运用这些方法，打造出独具特色的网页界面。