直接修改element.style仅影响内联样式且需驼峰命名；读取真实样式用getComputedStyle()；批量改样式推荐切换className或classList；CSS变量通过setProperty设置，优先使用语义化类名和属性控制而非硬编码style。
直接改 element.style 是最常用也最容易出错的方式
JavaScript 通过 element.style 属性能直接读写内联样式，但只对 HTML 中用 style="..." 写的或 JS 自己设过的值有效。它不反映 CSS 文件或 块里定义的规则。
-
div.style.color = "red"会生效，且优先级高于外部 CSS（因为属于内联样式） -
div.style.backgroundColor读不到.box { background-color: blue }的值，返回空字符串 - CSS 属性名要转成驼峰式：
font-size→fontSize，z-index→zIndex - 设
display: flex要写div.style.display = "flex"，不能漏引号
想读真实计算后的样式？用 getComputedStyle()
这个函数返回一个只读的 CSSStyleDeclaration 对象，包含元素最终渲染时所有生效的 CSS 属性值（含继承、层叠、媒体查询匹配结果）。
const div = document.querySelector('#myDiv');
const style = getComputedStyle(div);
console.log(style.width); // "200px"
console.log(style.marginTop); // "10px"
console.log(style.getPropertyValue('border-radius')); // "4px"
- 返回值全是字符串，包括数字单位（
"16px"、"bold"），没有自动转数字 - 不能用点语法读自定义属性（
--main-color），得用getPropertyValue('--main-color') - 在元素未插入 DOM 时调用会返回空对象（比如刚
document.createElement('div')后立刻调）
批量改样式更安全：切换 className 或操作 classList
硬编码一堆 style.xxx = yyy 容易混乱、难维护，也绕过了 CSS 的可复用性和媒体查询能力。推荐用类名控制样式状态。
/* CSS */
.active { opacity: 1; transform: scale(1.05); }
.disabled { opacity: 0.4; pointer-events: none; }
-
element.className = "active"会覆盖全部原有类名，慎用 -
element.classList.add("active")、.remove("disabled")、.toggle("hidden")更精准 -
classList.contains("hovered")可用于条件判断，比查style.opacity可靠得多 - 动态生成类名（如主题色）可配合
document.styleSheets插入规则，但极少需要
修改 CSS 变量（Custom Properties）影响整片样式树
在根节点（:root）或某个容器上设置 --primary-color，所有用到它的后代样式会自动响应——这是 JS 与 CSS 深度联动的关键接口。
立即学习“Java免费学习笔记（深入）”；
document.documentElement.style.setProperty('--primary-color', '#3b82f6');
// 或作用于局部容器
const card = document.querySelector('.card');
card.style.setProperty('--shadow-size', '8px');
- 变量名必须带两个短横线前缀，且大小写敏感：
--Color≠--color - 设为
""或无效值（如"invalid"）会导致该变量回退到继承值或初始值 - 不要在循环中高频调用
setProperty，可能触发多次重排；批量更新建议先getComputedStyle判断是否真有变化
改样式本身很简单，难的是判断“该不该改”和“在哪改”。比如动画中频繁改 top/left 会强制同步布局，而用 transform 就走 GPU；又比如暗色模式切换时，直接切 data-theme="dark" 比逐个元素设颜色更健壮。这些细节不在 API 文档里，但在真实项目里天天撞墙。
