JS 动态样式注入方案 – 使用 CSSOM 实现运行时样式修改的高效方法

选择CSSOM因它可直接操作CSS规则，避免全局污染与频繁DOM操作。通过insertRule添加动态样式，deleteRule删除或修改cssText更新，结合StyleManager类封装管理，提升性能与可维护性。

JS 动态样式注入方案的核心在于，如何在不污染全局 CSS 的前提下，灵活、高效地修改元素的样式。CSSOM 提供了一种强大的方式，让我们直接操作 CSS 对象模型，从而实现运行时样式的动态修改。它避免了直接修改 HTML 元素

style

属性的局限性，例如难以管理、优先级问题等。

使用 CSSOM 实现运行时样式修改的高效方法

为什么选择 CSSOM 而不是其他方案？

CSSOM 允许我们像操作 DOM 一样操作 CSS 规则。想象一下，你可以创建一个新的 CSS 规则，将其添加到文档的样式表中，然后立即看到效果，而无需重新加载样式表或操纵 HTML。

举个例子，假设我们需要根据用户输入动态改变按钮的颜色。使用 CSSOM，我们可以创建一个新的 CSS 规则，针对特定的按钮类，并设置其背景颜色。

立即学习“style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；

const styleSheet = document.styleSheets[0]; // 获取第一个样式表 const rule = `.dynamic-button { background-color: ${userInputColor}; }`; styleSheet.insertRule(rule, styleSheet.cssRules.length);

这种方式的优点在于：

• 性能优化：避免了频繁操作 DOM 元素的
  style="position:relative; padding:0px; margin:0px;">

  style

  属性，减少了浏览器的重绘和重排。

• 样式隔离：可以将动态样式限制在特定的作用域内，避免全局样式冲突。
• 代码可维护性：CSS 规则集中管理，更容易维护和调试。

如何使用 CSSOM 创建和管理动态样式？

创建动态样式的关键在于获取或创建样式表对象。通常，我们可以使用

document.styleSheets

访问文档中的所有样式表。如果没有现有的样式表，我们可以动态创建一个：

const style = document.createElement('style'); document.head.appendChild(style); const styleSheet = style.sheet;

有了样式表对象，我们就可以使用

insertRule

方法插入新的 CSS 规则。

insertRule

方法接受两个参数：CSS 规则字符串和插入位置的索引。

需要注意的是，不同浏览器对

insertRule

的实现可能存在差异。一些旧版本的浏览器可能使用

addRule

方法。为了兼容性，我们可以进行简单的浏览器检测：

先见AI

数据为基，先见未见

23

查看详情

function insertRule(sheet, selector, rules, index) {   if (sheet.insertRule) {     sheet.insertRule(selector + '{' + rules + '}', index);   } else if (sheet.addRule) {     sheet.addRule(selector, rules, index);   } }  // 使用示例 insertRule(styleSheet, '.dynamic-button', 'color: white; font-weight: bold;', 0);

如何高效地更新和删除动态样式？

动态样式的更新和删除同样重要。如果我们只是简单地添加新的规则，而不删除旧的规则，可能会导致样式冲突或性能问题。

更新样式的一种方法是先删除旧的规则，然后再添加新的规则。我们可以使用

deleteRule

方法删除指定索引位置的规则。

styleSheet.deleteRule(index); // 删除指定索引的规则

另一种更高效的方法是，如果我们需要频繁更新同一个规则，可以先保存规则的索引，然后直接修改规则的

cssText

属性。

const ruleIndex = 0; // 假设我们已经保存了规则的索引 styleSheet.cssRules[ruleIndex].style.backgroundColor = userInputColor; // 直接修改规则的样式

这种方式避免了频繁的添加和删除操作，可以显著提高性能。

CSSOM 在大型 Web 应用中的最佳实践

在大型 Web 应用中，动态样式的管理可能会变得非常复杂。为了更好地组织和维护动态样式，我们可以采用以下最佳实践：

• 组件化：将动态样式与组件绑定，每个组件负责管理自己的样式。
• 命名约定：使用清晰的命名约定，避免样式冲突。
• 样式表管理：使用专门的模块来管理样式表，提供统一的 API 来创建、更新和删除样式。

例如，我们可以创建一个

StyleManager

类，负责创建和管理动态样式表：

class StyleManager {   constructor() {     this.style = document.createElement('style');     document.head.appendChild(this.style);     this.styleSheet = this.style.sheet;   }    insertRule(selector, rules, index) {     // ... (与前面的 insertRule 函数相同)   }    deleteRule(index) {     this.styleSheet.deleteRule(index);   } }  // 使用示例 const styleManager = new StyleManager(); styleManager.insertRule('.my-component', 'color: blue;', 0);

通过将动态样式管理封装在一个类中，我们可以更好地控制样式的创建、更新和删除，提高代码的可维护性。