直接修改 element.style 仅影响内联样式、优先级高但不持久，会丢失原始 css 值且无法回退；推荐用 classlist、css 自定义属性或 getcomputedstyle 配合 getboundingclientrect 等更健壮方式。
直接改element.style只影响内联样式，且优先级高但不持久
这是最常用也最容易误用的方式：element.style.color = 'red' 看似简单，但它只写入 HTML 的 style 属性，不会触发表格、伪类或媒体查询中的规则，也无法覆盖带 !important 的外部样式。更关键的是，一旦后续 JS 把某个属性设为空字符串（比如 el.style.width = ''），浏览器不会回退到 CSS 文件里的值，而是彻底丢弃该属性——相当于“清空”而非“还原”。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 仅用于临时、一次性、明确需要高优先级覆盖的场景（如拖拽时动态设置
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'），不是你期望的“原始定义值”。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 读取尺寸类属性（
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 负责实现。
十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。 第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 用
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 更可维护。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 读取时用
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 决定怎么变”。
