js字体从粗变成正常字体

在JavaScript中，你可以通过操作DOM元素的style属性或者使用CSS类来改变字体的粗细。以下是一些基本的概念和实现方法：

基础概念

CSS Font Weight: 这是一个CSS属性，用于设置字体的粗细。可选值包括normal（等同于400）、bold（等同于700）以及其他介于100到900之间的数值。
DOM操作: JavaScript可以用来查询和修改DOM（文档对象模型）元素，包括它们的样式。

实现方法

方法一：直接修改style属性

你可以直接通过JavaScript修改元素的style.fontWeight属性来改变字体粗细。

// 假设有一个id为'myText'的元素
var element = document.getElementById('myText');

// 将字体设置为正常粗细
element.style.fontWeight = 'normal';

方法二：使用CSS类

你可以定义一个CSS类，然后通过JavaScript添加或移除这个类来改变字体粗细。

/* CSS */
.normal-font {
  font-weight: normal;
}
.bold-font {
  font-weight: bold;
}

// JavaScript
var element = document.getElementById('myText');

// 移除粗体类，添加正常字体类
element.classList.remove('bold-font');
element.classList.add('normal-font');

应用场景

用户交互: 当用户点击一个按钮时，改变某个文本元素的字体粗细。
动态内容更新: 根据应用的状态或用户的操作，动态调整文本的显示样式。

可能遇到的问题及解决方法

样式不生效:
- 确保JavaScript代码在DOM元素加载完成后执行，可以在window.onload事件中执行相关代码，或者将<script>标签放在HTML文档的底部。
- 检查CSS选择器是否正确，确保没有其他CSS规则覆盖了你的设置。

字体粗细值不正确:
- 确认使用的字体粗细值是有效的，例如normal、bold或者100到900之间的数值。

示例代码

以下是一个完整的示例，展示了如何通过按钮点击事件来改变文本的字体粗细：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Font Weight</title>
<style>
  .bold-font {
    font-weight: bold;
  }
  .normal-font {
    font-weight: normal;
  }
</style>
</head>
<body>

<p id="myText" class="bold-font">这是一段文本。</p>
<button onclick="changeFontWeight()">切换字体粗细</button>

<script>
function changeFontWeight() {
  var element = document.getElementById('myText');
  if (element.classList.contains('bold-font')) {
    element.classList.remove('bold-font');
    element.classList.add('normal-font');
  } else {
    element.classList.remove('normal-font');
    element.classList.add('bold-font');
  }
}
</script>

</body>
</html>

在这个示例中，点击按钮会切换文本的字体粗细状态。