CSS样式操作与类管理

JavaScript动态控制样式和类名，实现丰富的交互效果。

style属性操作

设置行内样式

const el = document.querySelector('.box');

// 单个样式设置
el.style.color = 'red';
el.style.fontSize = '16px';
el.style.marginTop = '10px';

// 注意：属性名需驼峰命名
// CSS: font-size → JS: fontSize
// CSS: margin-top → JS: marginTop

批量设置样式

// cssText批量设置
el.style.cssText = 'color: red; font-size: 16px; margin-top: 10px;';

// 或使用Object.assign
Object.assign(el.style, {
    color: 'red',
    fontSize: '16px',
    marginTop: '10px'
});

获取行内样式

// 只能获取行内样式
console.log(el.style.color);
console.log(el.style.fontSize);

// 注意：无法获取CSS文件中定义的样式
// 如 el.style.width 可能返回空字符串

className操作

设置类名

const el = document.querySelector('.box');

// 直接设置（覆盖所有）
el.className = 'box active';

// 获取类名
console.log(el.className);  // 'box active'

字符串拼接

// 添加类（需要手动处理）
el.className += ' active';

// 条件添加
if (!el.className.includes('active')) {
    el.className += ' active';
}

classList API

常用方法

const el = document.querySelector('.box');

// 添加类
el.classList.add('active');

// 移除类
el.classList.remove('active');

// 切换类
el.classList.toggle('active');

// 检查是否包含
el.classList.contains('active');  // true/false

// 替换类
el.classList.replace('old', 'new');

多类名操作

// 同时添加多个
el.classList.add('active', 'highlight', 'selected');

// 同时移除多个
el.classList.remove('active', 'highlight');

// 条件切换
el.classList.toggle('active', forceAdd);  // true强制添加，false强制移除

classList属性

// 类名数量
el.classList.length;

// 索引访问
el.classList[0];
el.classList.item(0);

// 遍历
el.classList.forEach(cls => console.log(cls));

// 转数组
Array.from(el.classList);

获取计算样式

getComputedStyle

const el = document.querySelector('.box');

// 获取最终计算样式
const styles = window.getComputedStyle(el);
console.log(styles.width);      // '100px'
console.log(styles.color);      // 'rgb(255, 0, 0)'
console.log(styles.fontSize);   // '16px'

// 获取特定属性
const width = window.getComputedStyle(el).width;

伪元素样式

// 获取伪元素样式
const pseudo = window.getComputedStyle(el, '::before');
console.log(pseudo.content);

getPropertyValue

const styles = window.getComputedStyle(el);

// 两种方式获取
styles.width;                    // 属性访问
styles.getPropertyValue('width'); // 方法访问（推荐）

设置CSS变量

操作CSS变量

// 设置变量
el.style.setProperty('--primary-color', '#336699');
document.documentElement.style.setProperty('--theme', 'dark');

// 获取变量
const value = el.style.getPropertyValue('--primary-color');

// 移除变量
el.style.removeProperty('--primary-color');

CSS中使用

.box {
    color: var(--primary-color);
}

className vs classList对比

推荐使用classList：API更清晰，不易出错。

实际应用示例

条件样式切换

const btn = document.querySelector('button');

btn.addEventListener('click', () => {
    btn.classList.toggle('active');
});

表单验证样式

const input = document.querySelector('input');

input.addEventListener('input', () => {
    if (input.value.length < 3) {
        input.classList.add('error');
        input.classList.remove('success');
    } else {
        input.classList.add('success');
        input.classList.remove('error');
    }
});

获取元素实际尺寸

const el = document.querySelector('.box');
const styles = window.getComputedStyle(el);

const width = parseFloat(styles.width);
const height = parseFloat(styles.height);
const padding = parseFloat(styles.paddingTop);

要点总结

1. classList推荐：API简洁，操作安全
2. style行内：只设置行内样式，不获取CSS文件样式
3. 驼峰命名：style属性需转为驼峰
4. getComputedStyle：获取最终计算样式值
5. CSS变量：通过setProperty操作