javascript 可通过创建 style 标签、操作 cssstylesheet 或设置内联样式动态管理 css：方法一用 createelement('style') 注入 css 字符串；方法二用 insertrule/deleterule 精细控制规则；方法三用 element.style 或 classlist 结合 css 变量实现轻量定制。
可以直接用 javascript 创建并插入 <style></style> 标签，或操作 cssstylesheet 对象来动态添加、修改、删除 css 规则，无需刷新页面就能实时生效。
方法一：创建 style 标签并写入 CSS 文本
这是最简单直接的方式，适合一次性注入少量样式，或需要完整 CSS 字符串的场景。
- 用
document.createElement('style')创建新标签 - 设置
textContent或innerHTML为 CSS 字符串（注意避免 XSS，不拼接用户输入） - 用
document.head.appendChild()插入到文档头部
示例：
const style = document.createElement('style');
style.textContent = `
.highlight { background: yellow; padding: 2px 6px; }
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
`;
document.head.appendChild(style);
方法二：通过 insertRule 动态添加 CSS 规则
更精细地控制样式表，支持运行时增删改规则，适用于主题切换、组件级样式隔离等场景。
- 先获取或创建一个
CSSStyleSheet对象（如document.styleSheets[0]或新建style标签后取sheet属性） - 调用
insertRule(rule, index)插入规则（index表示插入位置，0 为开头） - 用
deleteRule(index)删除指定位置的规则
示例：
const style = document.createElement('style');
document.head.appendChild(style);
const sheet = style.sheet;
// 添加规则
sheet.insertRule('.btn-primary { color: white; background: #007bff; }', 0);
sheet.insertRule('@media (max-width: 768px) { .btn-primary { font-size: 14px; } }', 1);
// 删除第一条规则
sheet.deleteRule(0);
方法三：为特定元素动态生成内联 style 或 class
虽然不算“生成样式表”，但在实际开发中常作为轻量替代方案，尤其适合个性化样式或响应式状态变更。
- 用
element.style.property = value直接设置内联样式（注意驼峰命名，如backgroundColor） - 用
element.classList.add/remove/toggle()控制预定义 class - 结合
CSS Custom Properties（CSS 变量），在根元素上设置变量，再由 CSS 自动响应
示例（CSS 变量 + JS 控制）：
// JS
document.documentElement.style.setProperty('--primary-color', '#ff6b35');
// CSS 中已定义：.theme-btn { background: var(--primary-color); }
注意事项与兼容性
动态样式虽灵活，但需留意几个关键点：
-
insertRule在 IE 中需用addRule（已废弃，现代项目可忽略） - 跨域样式表（如从外部域名加载）无法通过
sheet.cssRules读取，会触发安全限制 - 大量频繁插入规则可能影响性能，建议批量操作或复用
style标签 - 使用
textContent而非innerHTML写入 CSS，避免潜在解析问题
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
