直接修改 element.style.xxx 即可，需注意驼峰命名（如 backgroundColor）、单位字符串（如 "14px"）、CSS 变量用 setProperty()、避免混淆只读的 getComputedStyle()。
直接改 element.style.xxx 就行，但注意驼峰命名和单位
DOM 元素的 style 对象映射的是 HTML 的 style 行内属性，修改它会立即生效，不需要重绘触发逻辑。但 CSS 属性名在 JS 中必须转成驼峰式：background-color → backgroundColor，font-size → fontSize，z-index → zIndex。
常见错误是漏写单位（比如把 16px 写成 16），除了 opacity、zIndex、flexGrow 等少数无单位属性外，其他像 width、margin、padding 都要带单位字符串。
-
el.style.color = "red"✅ -
el.style.fontSize = "14px"✅（不是14） -
el.style.backgroundColor = "#fff"✅ -
el.style.display = "none"✅（字符串值，不是布尔）
style.cssText 适合批量覆盖，但会清空已有行内样式
如果要一次性设多个样式，用 cssText 最快，但它会**完全替换**当前元素的整个 style 字符串，之前通过 style.xxx 设置的值也会丢。
适用场景：你确定要彻底重置行内样式，或从后端/配置拿到一整段 CSS 字符串需要直接注入。
-
el.style.cssText = "color: blue; font-size: 16px; margin: 0"✅ - ⚠️ 不推荐在已有行内样式的元素上滥用，容易误删关键样式（比如别人设的
position: absolute） - 注意分号结尾，不加分号也能解析，但加了更稳妥；空格不影响，但别混用单双引号导致字符串截断
用 setProperty() 操作自定义属性或 CSS 变量更安全
如果目标是设置 CSS 自定义属性（即 --main-color 这类），或者想绕过驼峰转换、保留原始连字符写法，该用 element.style.setProperty()。
它不强制驼峰，支持任意合法 CSS 属性名，包括标准属性和自定义属性，而且不会覆盖其他样式（相比 cssText 更精细）。
-
el.style.setProperty("color", "green")✅（等价于el.style.color = "green"） -
el.style.setProperty("--highlight-bg", "#ffeb3b")✅（style.xxx方式无法设这个） -
el.style.setProperty("background-color", "#000")✅（不用转成backgroundColor） - 注意：
setProperty()不会自动补单位，"12"和"12px"效果不同
别忘了 getComputedStyle() 是只读的，不能用来改样式
新手常混淆 getComputedStyle(el) 和 el.style：前者返回计算后的最终样式（含继承、层叠结果），是只读对象；后者才是可写的行内样式接口。
如果你发现 el.style.xxx 改了但页面没变，大概率是因为：
- 样式被 CSS 规则覆盖（优先级更高），
style虽然写了，但没生效 - 用了
getComputedStyle(el).xxx试图赋值 —— 这根本不会报错，但也没任何效果 - 元素还没挂载到 DOM（
style可写，但浏览器不渲染）
验证是否生效，最直接的是看元素的 style 属性在开发者工具中是否更新，而不是只信 getComputedStyle 返回值。
CSS 变量、驼峰规则、单位字符串、样式优先级——这四个点只要漏一个，就可能白改半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
