直接修改 element.style 仅影响内联样式、优先级高但不持久，会丢失原始 CSS 值且无法回退；推荐用 classList、CSS 自定义属性或 getComputedStyle 配合 getBoundingClientRect 等更健壮方式。
直接改element.style只影响内联样式，且优先级高但不持久
这是最常用也最容易误用的方式：element.style.color = 'red' 看似简单，但它只写入 HTML 的 style 属性，不会触发表格、伪类或媒体查询中的规则，也无法覆盖带 !important 的外部样式。更关键的是，一旦后续 JS 把某个属性设为空字符串（比如 el.style.width = ''），浏览器不会回退到 CSS 文件里的值，而是彻底丢弃该属性——相当于“清空”而非“还原”。
实操建议：
- 仅用于临时、一次性、明确需要高优先级覆盖的场景（如拖拽时动态设置
transform） - 避免链式赋值多个样式，改用
Object.assign(el.style, { width: '200px', opacity: 0.8 }) - 设为
''前先缓存原始值，或改用el.style.removeProperty('width')来真正移除内联声明
用getComputedStyle()读取计算后样式，注意它不可写且含单位
getComputedStyle(el) 返回的是只读的 CSSStyleDeclaration 对象，反映元素最终渲染出的样式（已合并所有层叠、继承、媒体查询结果）。但它返回的数值全带单位（'16px'、'rgba(0, 0, 0, 0.5)'），不能直接参与数学运算；而且对 display: none 或未插入 DOM 的元素，多数属性会返回默认值（如 'none' 或 '0px'），不是你期望的“原始定义值”。
实操建议：
- 读取尺寸类属性（
width、height）优先用
el.getBoundingClientRect()，它返回数值型对象，无单位，且包含滚动偏移 - 需要解析颜色时，别依赖
computed.color的字符串格式，用window.getComputedStyle(el).getPropertyValue('color')更稳定 - 若要监听样式变化，不要轮询
getComputedStyle，改用MutationObserver监听style属性，或用CSSContainerQueries（现代方案）
批量操作样式推荐className或classList，而非拼接style字符串
手动拼 el.style.cssText = 'color:red; font-size:14px; margin:0' 是反模式：易出错、难维护、覆盖已有内联样式、无法利用 CSS 预处理器或变量。真实项目中，样式逻辑应和行为逻辑分离——把视觉状态映射为 class 名，由 CSS 负责实现。
实操建议：
- 用
el.classList.add('active')、.toggle('hidden', condition)替代字符串操作 - 需要动态生成 class（如主题色），用
document.documentElement.setAttribute('data-theme', 'dark')，再在 CSS 中写[data-theme='dark'] .btn { background: #333 } - 避免
el.className = 'a b c'全量重写，它会意外清掉其他脚本添加的 class
修改CSS自定义属性（--xxx）是响应式样式的现代解法
通过 JavaScript 修改 :root 或局部元素的 CSS 自定义属性（如 document.documentElement.style.setProperty('--primary-color', '#007bff')），能触发所有依赖它的 CSS 规则重算，且天然支持动画、继承和媒体查询。比操作 class 更细粒度，比硬编码 style 更可维护。
实操建议：
- 读取时用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')，注意返回值含空格，需.trim() - 修改作用域：想只影响某个组件？给其容器加
style="--item-height: 48px"，子元素用height: var(--item-height) - 慎用在大量元素上高频修改（如每帧改
--scroll-y），可能触发强制同步布局；优先考虑transform+will-change
真正复杂的样式交互（比如深色模式切换、动画进度绑定、主题色实时预览）往往不是靠“多写几个 style 赋值”解决的，而是靠合理划分 CSS 作用域、善用自定义属性传递状态、以及让样式系统本身具备响应能力。JS 只负责“告诉 CSS 状态变了”，而不是“代替 CSS 决定怎么变”。
