DOM样式操作
通过JavaScript动态修改元素样式，实现丰富的交互效果。
style属性
直接设置样式
JavaScript
element.style.color = 'red';
element.style.fontSize = '16px';
element.style.backgroundColor = '#fff';
cssText批量设置
JavaScript
element.style.cssText = 'color: red; font-size: 16px;';
获取计算样式
JavaScript
const style = window.getComputedStyle(element);
console.log(style.color); // rgb(255, 0, 0)
classList操作
添加类
JavaScript
element.classList.add('active');
element.classList.add('class1', 'class2');
移除类
JavaScript
element.classList.remove('active');
element.classList.remove('class1', 'class2');
切换类
JavaScript
element.classList.toggle('active');
element.classList.toggle('hidden', condition); // 条件为true时添加
检查类
JavaScript
if (element.classList.contains('active')) {
// 存在active类
}
替换类
JavaScript
element.classList.replace('old', 'new');
className属性
直接操作完整类名字符串：
JavaScript
element.className = 'class1 class2';
element.className += ' class3'; // 追加类
样式操作对比
| 方式 | 适用场景 | 特点 |
|---|---|---|
| style | 单个样式动态修改 | 行内样式，优先级高 |
| classList | 类名切换 | 推荐使用，结构清晰 |
| className | 批量替换类名 | 会覆盖原有类 |
注意：
style属性只能获取行内样式，获取最终样式需用getComputedStyle。
要点总结
- 单个样式用
style属性，多属性用cssText - 类名操作优先使用
classList，语义清晰 toggle方法可传第二个参数控制添加或移除- 获取最终样式用
getComputedStyle - 避免频繁操作样式，可切换类名提升性能
