js改变文字粗细

在JavaScript中改变文字粗细，可以通过操作DOM元素的style属性来实现，具体是修改font-weight属性。

一、基础概念

1. DOM（Document Object Model）
   • 是HTML和XML文档的编程接口。它表示文档的结构，并使程序能够更改文档的内容、结构和样式。

• font - weight属性
  • 用于设置字体的粗细程度。可以取的值有数值（如100、200、300等一直到900）或者关键字（如normal、bold）。通常，数值越大字体越粗，normal等同于400，bold等同于700。

二、示例代码

1. 通过ID选择元素并修改
   • 假设HTML中有这样一个元素：
   • 假设HTML中有这样一个元素：
   • 在JavaScript中可以这样修改它的文字粗细：
   • 在JavaScript中可以这样修改它的文字粗细：

• 通过类名选择元素并修改（如果有多个元素需要修改）
  • HTML示例：
  • HTML示例：
  • JavaScript代码：
  • JavaScript代码：

三、应用场景

1. 用户交互方面
   • 当用户鼠标悬停在某个按钮或者链接上时，可以通过JavaScript改变上面文字的粗细来提供视觉反馈。例如：
   • 当用户鼠标悬停在某个按钮或者链接上时，可以通过JavaScript改变上面文字的粗细来提供视觉反馈。例如：
   • 当用户鼠标悬停在某个按钮或者链接上时，可以通过JavaScript改变上面文字的粗细来提供视觉反馈。例如：

• 动态内容展示
  • 在根据不同的条件显示不同粗细文字的场景中。比如在一个成绩显示系统中，如果成绩优秀（90分以上），文字显示为粗体，可以通过JavaScript根据成绩数值动态改变文字粗细。

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

1. 样式不生效
   • 可能原因：
     • 存在其他CSS样式覆盖了通过JavaScript设置的font - weight属性。例如，在外部CSS文件中有针对该元素的更具体的样式规则。
     • JavaScript代码执行的时机不对，可能在DOM元素还未加载完成时就尝试修改其样式。
   • 解决方法：
     • 检查CSS样式优先级，可以使用!important关键字（但不推荐过度使用）来确保JavaScript设置的样式生效，如element.style.fontWeight = 'bold !important';。
     • 如果是执行时机问题，可以将JavaScript代码放在window.onload事件处理函数中，或者将<script>标签放在HTML文档的底部（在</body>之前），确保DOM元素已经加载完成。

• 数值范围错误
  • 如果设置的font - weight数值不在100 - 900的范围内，浏览器可能会自动将其调整到最接近的有效值。要确保设置的数值在这个合法范围内。