如何用JavaScript按ID创建、修改、禁用多组CSS规则

摘要 #

我正在尝试找到一种使用JavaScript在页面上动态创建、修改和禁用CSS规则的方法。这些规则以带有ID的“包”形式存在，每个包包含一个或多个可能重叠的CSS规则。

示例与数据 #

原始规则格式：

/*ID: something*/
div#foobar {display:none;}

/*ID: blah*/
input {background:red;}
div.password {width:100px;}

/*ID: test*/
div.password {width:200px;}

存储为关联数组：

const myrules = {
  "something": "div#foobar {display:none;}",
  "blah": "div.password {width:100px;} input {background:red;}",
  "test": "div.password {width:200px;}"
};

问题 #

需要一种方法将定义好的规则添加到页面中，并能通过ID切换它们的启用状态。

核心需求 #

• 使用标准CSS语法添加规则（如background-color而非JS对象属性名.backgroundColor）
• 支持启用/禁用指定ID的规则包
• 通过字符串ID而非数字索引访问规则包
• 所有规则整合到单个样式表中（避免创建上百个独立样式表）
• 可同时激活多个规则包，叠加应用样式
• 仅通过修改样式实现，不直接操作页面DOM元素

已尝试方案 #

试过document.styleSheets、.sheet.cssRules[]、.innerHTML和insertRule()等方法，但这些方法逻辑复杂，缺少完整示例，始终无法同时满足所有需求。搜索时也因表述模糊难以找到准确方案。

核心思路 #

1. 创建全局样式表统一管理所有动态规则
2. 维护ruleMap映射表，记录每个规则包ID对应的CSS规则索引，实现ID快速定位
3. 解析CSS字符串为单个规则，用insertRule添加到样式表并记录索引
4. 通过修改规则的disabled属性实现启用/禁用

完整代码实现 #

// 初始化全局样式表
const styleSheet = (() => {
  const styleEl = document.createElement('style');
  document.head.appendChild(styleEl);
  return styleEl.sheet;
})();

// 存储ID与对应规则索引的映射
const ruleMap = new Map();

/**
 * 添加规则包到样式表
 * @param {string} id - 规则包ID
 * @param {string} cssText - CSS规则字符串
 */
function addStylePackage(id, cssText) {
  if (ruleMap.has(id)) return; // 避免重复添加

  // 拆分CSS字符串为单个规则（兼容复杂场景的正则写法）
  const rules = cssText.match(/[^}]+}/g)?.filter(rule => rule.trim()) || [];
  
  const ruleIndices = [];
  rules.forEach(rule => {
    try {
      const index = styleSheet.insertRule(rule, styleSheet.cssRules.length);
      ruleIndices.push(index);
    } catch (err) {
      console.error(`添加规则失败: ${rule}`, err);
    }
  });

  ruleMap.set(id, ruleIndices);
}

/**
 * 切换规则包的启用状态
 * @param {string} id - 规则包ID
 * @param {boolean} [enabled] - 可选，指定启用/禁用；不传则切换当前状态
 */
function toggleStylePackage(id, enabled) {
  const indices = ruleMap.get(id);
  if (!indices) return;

  indices.forEach(index => {
    const rule = styleSheet.cssRules[index];
    rule.disabled = typeof enabled === 'boolean' ? !enabled : !rule.disabled;
  });
}

/**
 * 移除规则包
 * @param {string} id - 规则包ID
 */
function removeStylePackage(id) {
  const indices = ruleMap.get(id);
  if (!indices) return;

  // 倒序删除，避免索引移位
  [...indices].sort((a, b) => b - a).forEach(index => {
    styleSheet.deleteRule(index);
  });

  ruleMap.delete(id);
}

// 使用示例
// 批量添加所有规则包
Object.entries(myrules).forEach(([id, css]) => addStylePackage(id, css));

// 禁用test规则包
toggleStylePackage('test', false);
// 切换blah规则包的状态
toggleStylePackage('blah');
// 启用test规则包
toggleStylePackage('test', true);

关键细节说明 #

• CSS规则拆分：使用正则/[^}]+}/g拆分，可兼容包含特殊字符的CSS属性值（如content: "}"）
• 索引管理：删除规则时倒序操作，防止前面规则删除后后续规则索引偏移
• 启用/禁用：直接操作原生CSSRule.disabled属性，高效且符合浏览器规范
• 样式表复用：所有规则集中在单个样式表，避免创建大量DOM元素

注意事项 #

• 浏览器对insertRule有同源策略限制，扩展或特殊环境需确保权限充足
• 媒体查询、关键帧等复杂CSS规则，需调整拆分逻辑保证规则完整性

内容的提问来源于stack exchange，提问作者Synetech