javascript怎么实现加粗 - web开发

# JavaScript怎么实现加粗

在网页开发中，文字加粗是常见的文本样式需求。JavaScript提供了多种方式实现这一效果，本文将详细介绍5种主流方法及其适用场景。

## 1. 使用style.fontWeight属性

最直接的方式是通过DOM元素的`style`属性修改`fontWeight`值：

```javascript
const element = document.getElementById('myText');
element.style.fontWeight = 'bold'; // 设置为加粗
element.style.fontWeight = 'normal'; // 取消加粗

特点： - 直接修改行内样式 - 优先级高于CSS样式表 - 适合动态修改单个元素样式

2. 操作classList添加CSS类

通过添加/移除包含加粗样式的CSS类：

.bold-text {
  font-weight: 700 !important;
}

element.classList.add('bold-text'); // 加粗
element.classList.remove('bold-text'); // 取消

优势： - 样式与行为分离 - 便于批量管理 - 支持CSS预处理器

3. 使用document.execCommand（已废弃但需了解）

传统富文本编辑方法（注意：现代浏览器已废弃）：

document.execCommand('bold', false, null);

注意： - 仅适用于contentEditable元素 - 已被Selection和RangeAPI取代