17370845950

直接操作 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) 响应。