JavaScript通过style属性或classList控制DOM样式，推荐用CSS类切换；style需驼峰命名，getComputedStyle获取计算后样式，批量操作应避免强制同步布局。
JavaScript 通过操作 DOM 元素的 style 属性或 CSS 类名，就能直接控制元素的视觉表现。核心思路是：要么内联改单个样式，要么切换预定义的 CSS 类——后者更推荐，结构清晰、易于维护。
直接修改元素的 style 属性
每个 DOM 元素都有一个 style 属性，它是一个只读的 CSSStyleDeclaration 对象，但可以赋值。注意：CSS 中的连字符写法（如 background-color）要转成驼峰命名（backgroundColor）。
-
获取元素：
const box = document.getElementById('myBox'); -
设置单个样式：
box.style.color = 'red'; -
设置多个样式（推荐用
Object.assign）：Object.assign(box.style, {
width: '200px',
height: '100px',
background: '#3498db',
borderRadius: '8px'
});
通过 classList 操作 CSS 类（更推荐）
把样式逻辑写在 CSS 文件里，JS 只负责“开关”类名，这样样式和行为分离，可复用、易调试。
-
添加类：
box.classList.add('active'); -
移除类：
box.classList.remove('hidden'); -
切换类（有则删，无则加）：
box.classList.toggle('highlight'); -
检查是否含某类：
if (box.classList.contains('disabled')) { ... } -
一次性替换多个类（清空再设）：
box.className = 'btn btn-primary btn-lg';（慎用，会覆盖所有现有类）
读取计算后的样式（getComputedStyle）
如果想获取元素最终生效的样式（包括继承、浏览器默认、媒体查询匹配后的值），不能用 element.style.xxx（它只返回内联样式），而要用 window.getComputedStyle()。
立即学习“Java免费学习笔记（深入）”；
const computed = getComputedStyle(box);console.log(computed.width); // 返回 '200px'console.log(computed.backgroundColor); // 'rgb(52, 152, 219)'
批量更新样式时避免强制同步布局
频繁读写 style 或 offsetHeight 等会触发浏览器重排（reflow），影响性能。建议“读一批、写一批”，或用 requestAnimationFrame 批量处理。
-
❌ 不推荐（反复重排）：
for (let i = 0; i < items.length; i++) {
items[i].style.left = i * 10 + 'px';
console.log(items[i].offsetTop); // 强制同步计算 -
✅ 推荐（先读后写）：
const tops = items.map(el => el.offsetTop);
items.forEach((el, i) => el.style.left = tops[i] * 2 + 'px');
