JS改样式首选style对象（驼峰命名、字符串值），批量用动态<style>标签（防重复、防XSS），复杂场景用CSSStyleSheet.insertRule，避免document.write和内联覆盖。
JS里用style对象改单个元素样式最直接
直接操作 DOM 元素的 style 属性，是 JS 中写样式的最小成本方式。它只影响当前元素，不污染全局，也不需要额外依赖。
常见错误是以为 style 能写 CSS 字符串，比如 el.style = "color: red; font-size: 14px" —— 这完全无效。JS 的 style 是一个 CSSStyleDeclaration 对象，只认驼峰属性名，且值必须是字符串。
-
el.style.backgroundColor✅（不是background-color） -
el.style.fontSize = "14px"✅（值带单位） -
el.style.display = ""可清空某项，但不会恢复 CSS 文件里的值，只会回到浏览器默认值 - 批量设置建议封装成函数，避免重复写
el.style.xxx = yyy
动态插入<style>标签适合复用样式规则
当多个元素要共用同一套样式，或者需要伪类（如 :hover）、媒体查询时，style 对象就无能为力了。这时得往 <head> 里加 <style> 块。
容易踩的坑是反复插入导致重复样式表。应该先查重，再追加：
立即学习“前端免费学习笔记（深入）”；
const styleId = 'js-dynamic-style';
let styleEl = document.getElementById(styleId);
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
document.head.appendChild(styleEl);
}
styleEl.textContent = '.btn { padding: 4px 8px; } .btn:hover { opacity: 0.8; }';
- 修改
textContent比innerHTML更安全，避免 XSS 风险 - 用
id标识可确保只有一份，后续更新直接覆写textContent - 注意：CSS 选择器作用域仍是全局，命名需防冲突（比如加前缀
js-xxx）
用CSSStyleSheet.insertRule精确控制规则顺序和条件
如果样式需要按优先级插入、或要配合 @media / @keyframes，直接操作 CSSStyleSheet 更可控。
典型错误是没拿到有效的 sheet 对象，或忽略插入索引导致规则错位：
- 从
<style>标签取：document.getElementById('my-style').sheet - 新建空 sheet：
const sheet = new CSSStyleSheet();（仅现代浏览器支持） - 插入规则：
sheet.insertRule('.card { border-radius: 4px; }', 0)—— 第二个参数是索引，0表示插到最前面 - 删除规则：
sheet.deleteRule(index)，得自己记住 index 或遍历sheet.cssRules查找
避免用document.write或内联style属性覆盖已有样式
document.write 在页面加载后调用会清空整个文档，而过度依赖 style 属性会让 CSS 文件失效，调试时样式面板里看不到来源。
更隐蔽的问题是：某些框架（如 React）会接管 style 属性，你手动改 el.style.color 可能被下一次 render 覆盖掉。
- 服务端渲染或 SSR 场景下，JS 插入的
<style>标签可能被水合（hydration）过程忽略，需在useEffect或DOMContentLoaded后执行 - 移动端 WebKit 有
style属性更新延迟问题，动画类样式建议用requestAnimationFrame包一层 - 真正需要“CSS 工具化”的场景（比如主题切换），别硬写 JS 拼样式，该上
CSS Custom Properties就上
