如何使用 JavaScript 更改文本的字体粗细？

在网页开发中，经常需要使用 JavaScript 来动态修改页面上的文本样式。本篇文章将介绍如何使用 JavaScript 更改文本的字体粗细。

使用 CSS 属性 font-weight

在 CSS 中，可以使用属性 font-weight 来设置字体的粗细程度。通过修改该属性的值，可以使文本的字体变得更粗或更细。

在 JavaScript 中，可以通过修改元素的 style 属性来改变该元素的 CSS 样式，从而实现修改文本粗细的效果。

以下是代码示例：

const element = document.getElementById('myText'); // 获取需要修改字体粗细的元素
element.style.fontWeight = 'bold'; // 设置字体为粗体

这里我们使用了 getElementById 方法来获取需要修改的元素，然后通过设置 style 属性中的 fontWeight 值为 'bold'，来使文本变得更加粗体。

使用 CSS 类

除了直接修改元素的样式，我们还可以通过添加和删除 CSS 类来更改文本的字体粗细。

首先，在 CSS 文件中定义一个新的类，用于控制文本的字体粗细。例如，我们可以定义如下 CSS 类：

.bold {
  font-weight: bold;
}

然后，在 JavaScript 中，我们可以通过修改元素的 classList 属性来添加或删除该类，从而更改文本的字体粗细。

以下是代码示例：

const element = document.getElementById('myText'); // 获取需要修改字体粗细的元素
element.classList.add('bold'); // 添加 bold 类，使文本变粗

在上述代码中，我们通过 add 方法向元素的 classList 中添加了 'bold' 类，从而使文本变得更加粗体。

总结

以上就是使用 JavaScript 更改文本字体粗细的两种方法。通过修改 CSS 属性或添加 CSS 类，我们可以实现动态更改文本字体粗细的效果。