直接操作 element.style 是最常用方式，仅影响行内样式且属性名需驼峰式；推荐用 classList 切换预定义 CSS 类；避免 innerHTML 或 setAttribute 覆盖样式；读取计算值用 getComputedStyle，动态主题用 CSS 自定义属性。
直接操作 element.style 是最常用的方式
浏览器原生支持通过 element.style 对象设置行内样式，它映射的是 HTML 元素的 style 属性，修改后立即生效，无需重载页面。
注意：只影响
行内样式，且 CSS 属性名需转为驼峰式（如 background-color → backgroundColor）。
element.style.color = "red"element.style.fontSize = "16px"element.style.borderRadius = "4px"- 设为空字符串可“清除”该样式（但不会恢复 CSS 规则中的值，仅移除行内声明）
用 element.classList 切换预定义 CSS 类更安全
直接写 style 容易覆盖其他样式、难以维护、不支持伪类和媒体查询。推荐把样式逻辑收拢到 CSS 类中，用 JS 控制类的增删。
常见操作：
-
element.classList.add("active")— 添加类 -
element.classList.remove("disabled")— 移除类 -
element.classList.toggle("hidden")— 切换类（有则删，无则加） -
element.classList.contains("loading")— 判断是否存在某类
多个类可一次传入：element.classList.add("btn", "btn-primary")
避免踩坑：不要用 innerHTML 或字符串拼接改样式
下面这些做法看似能“改样式”，但实际危险或无效：
- ❌
element.innerHTML += 'text'— 破坏原有 DOM 结构，丢失事件监听器 - ❌
element.setAttribute("style", "color: red; font-weight: bold")— 会**完全覆盖**已有行内样式，不是追加 - ❌
element.style.cssText = "color: green"— 同样会清空之前所有style设置
如果真要批量设置，用对象封装再逐个赋值，或改用 Object.assign(element.style, { color: "green", opacity: 0.8 })。
需要操作伪元素或全局样式？得用 CSSStyleSheet 或 getComputedStyle
element.style 只读取/写入行内样式；想读取最终计算值（比如继承来的 color），要用 getComputedStyle(element)：
const computed = getComputedStyle(element); console.log(computed.backgroundColor); // 返回 "rgb(255, 0, 0)" 或 "transparent"
若要动态注入新 CSS 规则（例如适配主题色），可操作 document.styleSheets[0].insertRule()，但注意跨域样式表不可写、规则索引易错，生产环境慎用。
真正复杂的样式切换（如深色模式），建议用 :root 自定义属性 + JS 修改 document.documentElement.style.setProperty("--primary-color", "#3a86ff")，CSS 中用 color: var(--primary-color) 响应。
