JavaScript
操作元素样式属性
| 方法 | 语法 | 描述 |
|---|---|---|
| 通过classList操作类控制CSS | 元素.classList.add('类名') 元素.classList.remove('类名') 元素.classList.toggle('类名') | 通过添加、删除或切换类名来控制样式，不会覆盖原有类名 |
| 通过style属性操作CSS | 对象.style.样式属性 = 值 | 直接修改元素的行内样式 |
| 操作类名(className)操作CSS | 元素.className = '类名' | 通过修改类名来应用CSS样式，会覆盖原有类名 |
示例代码
1. 通过classList操作类控制CSS示例（推荐）
// HTML: <div class="box">内容</div>
// 获取元素
const box = document.querySelector('.box');
// 添加类名
box.classList.add('active');
// 移除类名
// box.classList.remove('active');
// 切换类名（点击时切换）
box.addEventListener('click', function() {
box.classList.toggle('active');
});
// CSS:
// .box { width: 200px; height: 100px; }
// .active { background-color: lightgreen; border: 2px solid green; }
2. 通过style属性操作CSS示例（不推荐）
// 获取元素
const box = document.querySelector('.box');
// 修改单个样式
box.style.width = '200px';
box.style.height = '100px';
box.style.backgroundColor = 'lightblue';
box.style.margin = '10px';
box.style.padding = '15px';
3. 操作类名(className)操作CSS示例（不推荐）
// HTML: <div class="box">内容</div>
// 获取元素
const box = document.querySelector('.box');
// 替换类名
box.className = 'box active'; // 保留原有类名并添加新类名
// CSS:
// .box { width: 200px; height: 100px; }
// .active { background-color: lightgreen; border: 2px solid green; }